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效果 示例 和 参考 代码 。 通 过 这 些 典 型 实验 与 项 目 实 训 , 可 帮助 读者 掌握 JSP Web 应 用 中 典型 项 目的 开发 
方法 。 
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随 着 我 国 高 等 教育 规模 的 扩大 以 及 产业 结构 调整 的 进一步 完善 ,社会 对 高 层次 应 用 型 
人 才 的 需求 将 更 加 人 迫切。 各 地 高 校 紧 密 结合 地 方 经 济 建设 发 展 需要 ,科学 运用 市 场 调 节 机 
制 ,合理 调整 和 配置 教育 资源 ,在 改革 和 改造 传统 学 科 专 业 的 基础 上 ,加 强 工程 型 和 应 用 型 
学 科 专 业 建 设 , 积 极 设置 主要 面向 地 方 支柱 产业 、 高 新 技术 产业 、 服 务 业 的 工程 型 和 应 用 型 
学 科 专 业 ,积极 为 地 方 经 济 建设 输送 各 类 应 用 型 人 才 。 各 高 校 加 大 了 使 用 信息 科学 等 现代 
科学 技术 提升 改造 传统 学 科 专 业 的 力度 ,从 而 实现 传统 学 科 专 业 向 工程 型 和 应 用 型 学 科 专 
业 的 发 展 与 转变 。 在 发 挥 传统 学 科 专 业 师 资 力量 强 、 办 学 经 验 丰 富 .教学 资源 充裕 等 优势 的 
同时 ,不断 更 新 教学 内 容 改革 课程 体系 ,使 工程 型 和 应 用 型 学 科 专 业 教育 与 经 济 建设 相 适 
应 。 计 算 机 课程 教学 在 从 传统 学 科 向 工程 型 和 应 用 型 学 科 转 变 中 起 着 至 关 重 要 的 作用 , 工 
程 型 和 应 用 型 学 科 专业 中 的 计算 机 课程 设置 ,内容 体 系 和 教学 手段 及 方法 等 也 具有 不 同 于 
传统 学 科 的 鲜明 特点 。 

为 了 配合 高 校 工程 型 和 应 用 型 学 科 专 业 的 建设 和 发 展 ,急需 出 版 一 批 内 容 新 、 体 系 新 、 
方法 新 、 手 段 新 的 高 水 平 计算 机 课程 教材 。 目 前 ,工程 型 和 应 用 型 学 科 专 业 计 算 机 课程 教材 
的 建设 工作 仍 滞后 于 教学 改革 的 实践 ,如 现 有 的 计算 机 教材 中 有 不 少 内 容 陈旧 (依然 用 传统 
专业 计算 机 教材 代替 工程 型 和 应 用 型 学 科 专 业 教 材 ) , 重 理论 、. 轻 实践 ,不 能 满足 新 的 教学 计 
划 、 课 程 设置 的 需要 ; 一 些 课程 的 教材 可 供 选择 的 品种 太 少 ; 一 些 基础 课 的 教材 虽然 品种 
较 多 ,但 低 水 平 重 复 严重 ; 有 些 教材 内 容 庞 杂 , 书 越 编 越 厚 ; 专业 课 教材 .教学 辅助 教材 及 
教学 参考 书 短缺 ,等 等 ,都 不 利于 学 生 能 力 的 提高 和 素质 的 培养 。 为 此 ,在 教育 部 相关 教学 
指导 委员 会 专家 的 指导 和 建议 下 ,清华 大 学 出 版 社 组 织 出 版 本 系列 教材 ,以 满足 工程 型 和 应 
用 型 学 科 专业 计算 机 课程 教学 的 需要 。 本 系列 教材 在 规划 过 程 中 体现 了 如 下 一 些 基 本 原则 
和 特点 。 

(1) 面向 工程 型 与 应 用 型 学 科 专业 ,强调 计算 机 在 各 专业 中 的 应 用 。 教 材 内 容 坚持 基 
本 理论 适度 ,反映 基本 理论 和 原理 的 综合 应 用 ,强调 实践 和 应 用 环节 。 

(2) 反映 教学 需要 ,促进 教学 发 展 。 教 材 规划 以 新 的 工程 型 和 应 用 型 专业 目录 为 依据 。 
教材 要 适应 多 样 化 的 教学 需要 ,正确 把 握 教 学 内 容 和 课程 体系 的 改革 方向 ,在 选择 教材 内 容 
和 编写 体系 时 注意 体现 素质 教育 、 创 新 能 力 与 实践 能 力 的 培养 ,为 学 生 知识 、 能 力 、 素 质 协调 
发 展 创造 条 件 。 

(3) 实施 精品 战略 ,突出 重点 ,保证 质量 。 规 划 教 材 建设 仍然 把 重点 放 在 公共 基础 课 和 
专业 基础 课 的 教材 建设 上 ; 特别 注意 选择 并 安排 一 部 分 原来 基础 比较 好 的 优秀 教材 或 讲义 
修订 再 版 ,逐步 形成 精品 教材 ; 提倡 并 鼓励 编写 体现 工程 型 和 应 用 型 专业 教学 内 容 和 课程 
体系 改革 成 果 的 教材 。 
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(4) 主张 一 纲 多 本 ,合理 配套 。 基 础 课 和 专业 基础 课 教材 要 配套 ,同一 门 课程 可 以 有 多 
本 具有 不 同 内 容 特 点 的 教材 。 处 理 好 教材 统一 性 与 多 样 化 ,基本 教材 与 辅助 教材 ,教学 参考 
书 ,文字 教材 与 软件 教材 的 关系 ,实现 教材 系列 资源 配套 。 

(5) 依靠 专家 ,择优 选用 。 在 制订 教材 规划 时 要 依靠 各 课程 专家 在 调查 研究 本 课程 教 
材 建 设 现状 的 基础 上 提出 规划 选 题 。 在 落实 主编 人 选 时 ,要 引入 竞争 机 制 ,通过 申报 ,评审 
确定 主编 。 书 稿 完成 后 要 认真 实行 审 稿 程序 ,确保 出 书 质 量 。 

繁荣 教材 出 版 事业 ,提高 教材 质量 的 关键 是 教师 。 建 立 一 支 高 水 平 的 以 老 带 新 的 教材 
编写 队伍 才能 保证 教材 的 编写 质量 和 建设 力度 ,希望 有 志 于 教材 建设 的 教师 能 够 加 入 到 我 
们 的 编写 队伍 中 来 。 


21 世纪 高 等 学 校 计 算 机 教育 实用 规划 教材 编 委 会 
ЖАА. 魏 江 江 weijj@tup. tsinghua. edu. cn 
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JSP 是 一 种 动态 网 页 技术 标准 ,拥有 强大 的 服务 器 端 动态 网 页 技术 功能 ,是 目前 在 全 球 
最 为 流行 ,应 用 最 为 广泛 的 软件 开发 技术 之 一 。JSP 与 Microsoft 公司 的 ASP 技术 非常 相 
似 , 两 者 都 提供 在 HTML 代码 中 混合 某 种 程序 代码 ,由 语言 引擎 解释 执行 程序 代码 的 
能 力 。 

JSP 技术 是 J2EE 技术 的 核心 之 一 ,是 基于 Java Servlet 以 及 整个 Java 体系 的 Web JF 
发 技术 ,利用 这 一 技术 可 以 建立 安全 、 跨 平台 的 先进 动态 网 站 。JSP 使 用 的 是 Java 语言 ,以 
Java 技术 为 基础 ,又 在 许多 方面 做 了 改进 ,具有 动态 页 面 与 静态 页 面 分 离 ,能 够 脱离 硬件 平 
台 的 束缚 以 及 编译 后 运行 等 优点 。 需 要 强调 的 是 ,要 想 真 正 地 掌握 JSP 技术 ,必须 有 较 好 
的 Java 语言 基础 ,以 及 HTML 语言 方面 的 知识 。 

本 书 紧 扣 JSP 基本 的 语法 ,结合 Servlet 的 最 新 规范 ,精心 挑选 了 50 个 实验 与 实 训 项 
目 , 通 过 实验 可 以 由 浅 入 深 、 循 序 渐进 地 理解 JSP Web 的 技术 原理 ,掌握 JSP 开发 中 的 典型 
应 用 问题 的 解决 方法 。 

全 书 共 11 章 , 第 1 章 为 Web 的 基本 原理 实验 ,提供 了 TIS Web 服务 器 的 配置 实验 ,为 
后 续 JSP Web 实验 打下 良好 基础 。 第 2 章 为 HTML 语言 基础 实验 ,实验 内 容 围绕 HTML 
文件 结构 .常用 标记 和 HTML 事件 .DIV-CSS 布局 和 JavaScript 语言 等 方面 。 通 过 这 些 实 
验 , 为 JSP 页面 设计 做 了 基础 性 准备 。 第 3 章 是 Java Web 开发 环境 搭建 实验 ,提供 WAR 
包 的 生成 与 发 布 及 基本 的 JSP 动态 网 页 实验 ,帮助 读者 在 理解 JSP 的 工作 原理 的 基础 上 掌 
JR JSP 项 目的 创建 与 发 布 过 程 。 第 4 章 是 JSP 技术 基础 实验 ,实验 内 容 主要 涉及 JSP 标准 
语法 ,JSP 指令 ,重点 是 JSP 的 九 大 内 置 对 象 及 其 使 用 方法 。 第 5 章 是 使 用 JSP 访问 数据 库 
实验 ,提供 使 用 JDBC 对 数据 库 进 行 增 \ 删 \ 改 、 查 等 典型 操作 的 实验 。 第 6 章 是 JavaBean 
技术 实验 ,提供 利用 JavaBean 自动 获取 表单 参数 等 方面 的 实验 。 第 7 章 是 Servlet 技术 实 
验 ,这 也 是 JSP 技术 的 核心 内 容 ,提供 使 用 Servlet 进行 带 验 证 码 的 用 户 登录 验证 ,文件 上 传 
等 典型 应 用 ,为 读者 加 深 对 Servlet 的 理解 ,体会 Servlet 在 项 目 开 发 中 至 关 重要 的 作用 。 第 
8 章 是 过 滤器 实验 ,内 容 涉 及 使 用 过 滤器 统一 处 理 中 文 乱码 以 及 强制 用 户 登录 的 典型 应 用 。 
第 9 章 是 EL 表达 式 基 础 实验 。 第 10 章 是 JSP 自 定 义 标签 实验 ,提供 JSP 自 定义 函数 标签 
和 自 定义 分 页 标签 实验 。 第 11 章 给 出 7 个 典型 实 训 项 目 , 内 容 包括 学 生 信息 管理 系统 、 使 
H JXL 操作 Excel X fF, fii JH JFreeChart 显示 动态 曲线 、 树 形 菜单 、 使 用 FreeMaker 自动 生 
成 Word 文档 .JSP 分 页 显示 ,高 校 毕业 设计 管理 系统 等 。 通 过 这 些 项 目 实 训 , 可 以 帮助 读 
者 进一步 巩固 和 掌握 JSP 实际 项 目 开发 方法 。 

全 书 由 讲授 JSP 课程 的 教师 ,在 总 结 多 年 教学 经 验 和 项 目 开发 经 验 的 基础 上 精心 编写 
而 成 ,在 实验 题材 选择 、 内 容 结 构 组 织 、 知 识 衔 接 处 理 、 典 型 案例 分 析 等 方面 进行 了 精心 安 
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排 。 本 书 采用 的 开发 环境 为 JDK 1. 6 十 MyEclipse 8. x+- Tomcat 8. x 十 MySQL 5.5, 

本 书 由 王 春 明 负 责 统 稿 , 史 胜 辉 、 陆 培 军 、 王 进 、 沈 学 华 、 曹 利 \ 陈 亮 、 王 则 林 、 朱 浩 、 张 晓 
峰 严 燕 . 王 丹 丹 、 魏 晓 宁 、 萝 峰 峥 、 朱 晓 辉 、 陈 森 博 、 丁 浩 、 袁 鸿 燕 、 朱 觅 程 等 在 本 书 的 编写 、 代 
码 测 试 等 方面 给 予 了 许多 帮助 。 在 此 谨 向 他 们 表示 由 衷 的 感谢 ! 

感谢 清华 大 学 出 版 社 在 本 书 编写 和 出 版 过 程 中 给 予 的 大 力 支 持 ! 

本 书 配 有 完整 的 实例 源 代码 ,如 有 需要 ,请 从 清华 大 学 出 版 社 图 书 资源 网 站 下 载 。 

为 了 便于 课程 的 学 习 交 流 ,我 们 还 专门 开辟 了 课程 学 习 网 站 ,网 址 为 http://210. 29. 
65. 82:8080/jsp。 网 站 中 提供 了 本 书 所 需 的 全 部 开发 工具 软件 和 实验 与 实 训 项 目 源 代码 。 


编 者 
2016 年 5 月 
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第 1 章 Web 的 基本 原理 


Web 的 原本 含义 是 “网 ”的 意思 ,自从 互联 网 出 现 以 后 , Web 变 成 了 WWW (World 
Wide Web) 的 简称 ,中 文 称 为 万 维 网 或 互联 网 。 

Web 的 基本 工作 原理 是 请 求 与 响应 原理 ,由 遍布 在 互联 网 中 的 Web 服务 器 和 安装 了 
Web 浏览 器 的 计算 机 组 成 ,用 于 发 布 .浏览 查询 网 络 信息 。 它 是 一 种 基于 超 文本 方式 工作 
的 信息 系统 ,作为 一 个 能 够 处 理 文字 И 声音、 视频 等 多 媒体 信息 的 综合 系统 , 它 提 供 了 
丰富 的 信息 资源 ,这 些 信 息 资源 以 Web 页 面 的 形式 分 别 存放 在 各 个 Web 服务 器 上 ,用 户 可 
以 通过 浏览 器 向 服务 器 发 出 资源 请 求 ,服务 器 对 请 求 进行 处 理 和 响应 ,将 响应 结果 发 给 客户 
端 ,由 浏览 器 解析 显示 所 请 求 的 结果 信息 。 

这 里 ,首先 通过 IIS Web 服务 器 实验 ,理解 Web 的 工作 原理 ,为 以 后 学 习 JSP Web 服 
务 器 打下 基础 。 


【知识 要 点 】 


(1) Web 的 基本 工作 原理 。 

(2) 作为 Windows 组 件 的 IIS Web 服务 器 的 配置 方法 。 
(3) 编写 简单 的 HTML 页 面 文件 。 

(4) 在 TIS 服务 器 上 进行 Web 发 布 。 

(5) 客户 使 用 浏览 器 访问 该 IIS 服务 器 上 的 网 页 页 面 。 


【本 章 实验 目的 】 
本 童 实验 的 目的 是 让 学 生 掌 握 IIS 服务 器 的 配置 要 点 ,熟悉 简单 网 页 文件 的 编写 和 
Web 发 布 方法 ,加深 理解 Web 的 工作 原理 ,为 以 后 学 习 JSP Web 技术 打下 基础 。 


实验 1 IIS 服务 器 的 配置 


【实验 任务 】 
配置 IIS 服务 器 ,编写 简单 的 网 页 文件 并 在 TIS. 上 发 布 。 
【实验 步骤】 


(1) 从 网 上 下 载 IIS 安装 包 。 
(2) 开始 一 控制 面板 一 添加 或 删除 程序 一 添加 /删除 Windows 组 件 ,选择 “Internet fri 
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息 服 务 (IIS)”, 单 击 * 详 细 信息 (D) " E HL. Ye E" FrontPage 2000 服务 器 扩展 ”, 单 击 “ 确 定 ” 
按钮 ,如 图 1-1 所 示 。 


图 1-1 添加 IIS 服务 器 


然后 一 步 步 单 击 “ 确 定 ” 按 钮 ,会 提示 插入 安装 光盘 。 如 果 没 有 安装 光盘 ,就 使 用 网 上 下 
载 的 IISG 安装 包 , 浏 览 文件 夹 , 找 到 需要 安装 的 文件 。 这 一 步 会 反复 多 次 ,直到 最 终 完成 
IIS 文件 的 安装 。 

(3) IIS 基本 环境 配置 。 

以 Windows ХР 系统 为 例 , 应 在 “Windows 防火 墙 * 中 将 “Web 服务 器 (HTTP)” 进 行 例 
外 设置 ; 否则 ,用 户 将 无 法 访问 IIS Efl Web 服务 器 。 设 置 方法 是 : 进入 “控制 面 版 ”双击 
“安全 中 心 ”, 选 择 “Windows 防火 墙 ”", 选 择 项 部 的 “高 级 ”选项 卡 , 青 选 “ 本 地 连接 ”, 按 “ 设 
置 ?按钮 ,选中 ”Web 服务 器 (HTTP)” 复 选 框 , 单 击 “ 确 定 ” 按 钮 即 可 ,如 图 1-2 所 示 。 

或 在 “Windows 防火 墙 ? 窗 口 的 “例外 ?中 ,添加 端口 为 80, 即 可 完成 Web 服务 器 防火 墙 
例外 设置 。 


1-2 15 服务 器 配置 


(4) 站 点 准备 与 发 布 。 

Web 站 点 在 服务 器 上 其 实 就 是 一 个 文件 夹 , 该 文件 夹 中 存放 编辑 好 的 THML 文件 。 
在 DD 盘 上 新 建文 件 夹 “D:\myweb”, 编 写 一 个 index. html 文件 放 入 该 文件 夹 中 。 

index. html 参考 代码 如 下 : 


<html> 
<head> 
<title > 第 一 个 HTML 页 面 </title> 
</head> 
<body> 
<p>title 元 素 的 内 容 会 显示 在 浏览 器 的 标题 栏 中 。</p> 
<р> body 元 素 的 内 容 会 显示 在 浏览 器 中 。</p> 
</body> 
</html> 


在 要 发 布 的 站 点 文件 夹 上 右键 ,弹出 *myweb 属性 ”对 话 框 , 选 “Web 共享 "选项 卡 中 的 


“共享 文件 夹 ”, 弹 出 “编辑 别名 ”对 话 框 , 单 击 “ 确 定 ” 按 钮 , 即 可 完成 myweb 站 点 的 发 布 ,如 
图 1-3 所 示 。 


图 1-3 ISWAR 
此 时 ,通过 控制 面板 中 的 “管理 工具 ”>“Internet 信息 服务 (IIS)”, 可 看 到 发 布 的 站 点 ， 
如 图 1-4 所 示 。 
(5) HS 站 点 配置 。 


ЎТ“ Internet 信息 服务 (IIS) ”管理 器 , 右 击 myweb 站 点 名 称 , 在 弹出 的 快捷 菜单 中 选 
择 * 网 站 属性 ?项 ,打开 * 网 站 属性 ?对 话 框 ,在 “文档 ”选项 卡 中 可 设置 默认 的 启动 文档 。 在 
“目录 安全 性 ”选项 卡 中 单 击 “ 编 辑 ” 按 钮 ,弹出 “身份 验证 方法 ”对 话 框 ,选中 “匿名 访问 ” 复 选 
框 ,如 图 1-5 所 示 。 

(6) IIS Web 访问 测试 。 

IIS 的 服务 端口 号 为 80 ,浏览 器 访问 服务 器 的 默认 端口 号 也 是 80, 通 常 省 略 这 个 端口 
号 。 在 浏览 器 地 址 栏 输入 http://localhost/myweb/index. html, 运 行 效果 如 图 1-6 所 示 。 

(7) 拓展 训练 。 

编写 个 人 网 站 ,在 IIS 服务 器 上 进行 发 布 。 


Web 的 基本 原理 
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Ea] [3 
Internet 信息 服务 
E1- 8) Pc-201102091808 本 地 计算 机 ) index. html 
s 


E Cg Printers 

8 iisj " 

:$ ur a | 这 是 刚才 发 布 的 站 点 哦 
m a 


EC] aspnet_client 


15 匿名 访问 设置 


360 安 全 浏览 器 7.1 
е | 域名 定向 http: //ocalhost/myweb/ndex html а! 
ъв Her Jire байт ооа > + HARRER 


EJ title 元 素 的 内 容 会 显示 在 浏览 器 的 标题 栏 中 。 
body 元 素 的 内 容 会 显示 在 浏览 器 中 。 


图 1-6 IIS 服务 器 运行 效果 


第 2 章 HTML 语言 基础 


【知识 要 点 】 


HTML 是 一 种 解释 性 的 超 文本 标志 语言 ,HTML 文件 是 由 HTML 命令 组 成 的 描述 性 
文本 文件 ,文件 的 扩展 名 是 html 或 htm. HTML 文件 可 供 浏 览 器 解释 浏览 。 

HTML 一 直 被 用 作 万 维 网 上 的 信息 表示 语言 , 它 能 独立 于 各 种 操作 系统 平台 。 
HTML 命令 可 以 说 明文 字 、 图 形 、 动 画 、 声 音 、 表 格 、 链 接 等 。 

HTML 语言 利用 各 种 标记 (tags) 来 标识 文档 的 结构 以 及 标识 超 链 接 (hyper link) 的 信 
息 。 标记 语言 由 一 系 标记 组 成 ,一 个 标记 就 是 一 种 约定 ,按照 它 完 成 一 定 任务 。HTML if 
言 的 特点 是 简单 、 直 观 , 用 于 显示 图 形 界面 特别 方便 ,这 正 是 网 页 所 需要 的 ,网 页 中 有 大 量 图 
形 界面 需要 显示 ,所 以 HTML 语言 得 以 流行 。 网 页 上 的 大 多 数 文字 、 图 画 都 是 通过 简单 的 


HTML 语句 产生 的 。 
HTML 语言 是 不 区 分 大 小 写 的 ,但 是 XML JSP 等 语言 是 区 分 大 小 写 的 。 
【实验 目的 】 


掌握 HTML 网 页 文件 的 编写 方法 ,进一步 加 深 理 解 Web 的 工作 原理 ,为 即将 学 习 JSP 
Web 技术 打下 基础 。 


【实验 环境 】 
IIS Web 服务 器 .FrontPage 或 Dreamweaver 网 页 编辑 工具 。 


实验 2.1 第 一 个 HTML 文件 


【实验 任务 】 
编写 HTML 网 页 文件 并 在 IIS Web 服务 器 上 发 布 。 
【实验 步骤 】 


(1) 使 用 FrontPage 或 Dreamweaver 网 页 编辑 工具 编辑 HTML 文件 。 
testl. html 参考 代码 如 下 : 


<html> 
<head> 
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<title> 李 白 的 诗 </title> 
</head> 
«body bgcolor="yellow" text = rgb(255,0,0)> 
< p align = "center"> 
<B> 静 夜 思 < br ></B> 
李白 <br ></P><Hr> 
<р align = "center"> 
床 前 明月 光 , 疑 是 地 上 霜 。<br> 
举 头 望 明 月 ,低头 思 故 乡 。<br> 
</p> 
< p align = "center" 
【说 明 3 就 究 时 床 前 酒 满月 光 , 如 同 降 了 一 地 白 霜 。<br> 
抬头 一 望 ,一 轮 峙 月 ,千里 清光 ,月 是 故乡 明 , 安 能 不 思乡 ?<br> 
本 诗 简明 地 描绘 了 月 夜 的 美景 ,真切 地 抒发 了 游子 思念 故乡 的 深情 。 
</p> 
</body> 
</html> 


(2) 将 上 述 内 容 以 testl. html 为 文件 名 存储 在 文件 夹 D:\ch2 中 。 
(3) 将 站 点 文件 夹 D:\ch2 在 IIS Web 服务 器 发 布 。 


(4) 在 浏览 器 访问 上 述 文件 ,观察 浏览 器 显示 结果 ,体会 各 种 文档 标记 及 排版 标记 的 使 
用 方法 。testl. html 的 运行 效果 如 图 2-1 所 示 。 


EE Vindows Internet Explorer 


WRAAE, SEX ERR. 
举 头 望 明 月 ， 低 头 思 故乡 。 


图 2-1 第 一 个 HTML 文件 运行 效果 


(5) 拓展 实验 1: 在 上 述 HTML E P. X SE < body — HY bgcolor 属性 ,增加 
background 属性 ,使 网 页 的 背景 变 成 一 幅 风 景 图 片 ( 图 片 文件 自 定 ) ,然后 存盘 并 刷新 页 面 
观察 结果 。 

(6) 拓展 实验 2: 为 上 述 网 页 增加 一 个 背景 音乐 , 即 在 文档 中 再 增加 一 个 二 bgsound src= 
"音乐 文件 名 "之 标记 ,然后 存盘 并 刷新 页 面 , 用 耳机 试听 效果 。 


实验 2.2 使 用 CSS 控制 表格 实验 1 


【实验 任务 】 
编辑 HTML 网 页 文件 ,使 用 CSS 控制 表格 ,在 IIS Web 服务 器 上 发 布 。 


【实验 步骤 】 


(1) 使 用 FrontPage 或 Dreamweaver 网 页 编辑 工具 编辑 HTML 文件 。 
test2. html 参考 代码 如 下 : 


<html> 
< head> 
«title» HTML Table </title> 
</head> 
< style type = "text/css"> 
< =- 
TABLE { 
background: blue; 
border - collapse: separate; 
border - spacing: 10pt; 
border - top: 15px solid red; 
border - left: 15px solid red; 
border - right: 5px dashed black; 
border - bottom: 10px dashed blue; } 
TD, TH ( 
background: white; 
border: outset 5pt; 
horizontal- align: right; ) 
CAPTION ( 
border: ridge 5pt blue; 
border - top: ridge 10pt blue; } 
--> 
</style> 
<body> 
<table> 
<caption> 员 工 销售 业绩 </caption> 
<thead><tr><th> 姓 名 </th>< th> 销 售 业绩 </th></tr> </thead> 
<tbody> 
<tr><td> 金 威 华 </td>< td» 600.00</td></tr> 
<tr>< td> 詹 姆 斯 </td>< td>755.00</td></tr> 
<tr><td> 武 虎 山 </td><td> 700.00</td></tr> 


</tbody> 
< tfoot > 
<tr>< td colspan = "2"> 同 志 们 ,继续 努力 哦 !</td></tr> 
</tfoot > 第 
</table> 2 
</body> = 
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</html > 


(2) 在 浏览 器 请 求 资源 ,观察 效果 ,体会 代码 含义 。test2. html 的 运行 效果 如 图 2-2 
所 示 。 


同志 们 ， 继 续 努 力 哦 ! 


图 2-2 test2. html 运行 效果 


实验 2.3 使 用 CSS 控制 表格 实验 2 


【实验 任务 】 
编辑 HTML 网 页 文件 ,使 用 CSS 控制 表格 ,表格 行 背景 颜色 随 鼠 标 移动 而 改变 。 
【实验 步骤 】 


(1) 使 用 FrontPage 或 Dreamweaver 网 页 编辑 工具 编辑 HTML 文件 。 
test3. html 参考 代码 如 下 : 


<html> 
<head> 
< meta http – equiv = "Content ~ Type" content = "text/html; charset = gb2312"> 
<title > 表格 样式 </title> 
< style type = "text/css"> 
table. hovertable (font - family: verdana, arial, sans - serif; 
font- size:llpx; 
color: #333333; 
border - width: 1px; 
border - color: #999999; 
border - collapse: collapse; } 
table. hovertable th ( background - color: #c3dde0; 
border - width: 1px; 
padding: 8px; 
border - style: solid; 
border- color: #a9c6c9;) 
table. hovertable tr ( background - color: #d4e3e5; } 
table. hovertable td ( border - width: 2px; 
padding: 8px; 
border – style: solid; 
border- color: &ffc6c9; } 


</style> 
</head> 
<body> 
< table class = "hovertable"> 
<tr><th> 学 号 </th>< th> 姓 名 </th>< th> 家 庭 住址 </th></tr> 


< tr onmouseover = "this. style. backgroundColor = ' #ffff66';" onmouseout = "this. 


backgroundColor = ' #d4e3e5 '; "> 
< td>8088801 </td><td> 张 立 升 </td><td> 江 苏 无 锡 </td></tr> 


< tr onmouseover = "this. style. backgroundColor = ' # ffff66 ' ;" onmouseout = "this. 


backgroundColor = ' #d4e3e5 '7 "> 
< td>8088802 </td>< td> 武 功 全 </td>< td> 河 南 洛阳 </td></tr> 


< tr onmouseover = "this. style. backgroundColor = ' # ffff66 ' ;" onmouseout = "this. 


backgroundColor = ' #d4e3e5 '; "> 
< td>8088803 </td><td> 文 辉 尚 </td>< td> 江 苏 南通 </td></tr> 


< tr onmouseover = "this. style. backgroundColor = ' &ffff66';" onmouseout = "this. 


backgroundColor = ' #d4e3e5 '; "> 
< td>8088804 </td>< td> 周 晓 诚 </td>< td> 湖 北 武汉 </td></tr> 


< tr onmouseover = "this. style. backgroundColor = ' # ffff66 ' ;" onmouseout = "this. 


backgroundColor = ' #d4e3e5 '; "> 
< td >8088805 </td><td> 唐 宫 锐 </td><td> 辽 宁 大 连 </td></tr> 
</table> 
</body> 
</html> 


(2) 在 浏览 器 请 求 资源 ,观察 效果 ,体会 代码 含义 。test3. html 的 运行 效果 如 图 2-3 


所 示 。 


8088801 ” 张 立 升 ”江苏 无 锡 
8088802 ”武功 全 ”河南 洛阳 
8088803 | З сеза 
8088804  JEBEK ”湖北 武汉 
8088805 EER ”辽宁 大 连 


图 2-3 test3. html 运行 效果 


实验 2.4 表格 布局 实验 


【实验 任务 】 
编辑 HTML 网 页 文件 ,使 用 表格 进行 页 面 布局 。 
【实验 步骤】 


(1) 使 用 FrontPage 或 Dreamweaver 网 页 编辑 工具 编辑 HTML 文件 。 
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test4. html 参考 代码 如 下 : 


<html> 
<head> 


<title> 表 格 标记 示例 </title> 
« meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
< style type = "text/css"> 
Siem 
body ( 
==> 
</style> 
</hrad> 
< body link = " # FFAA00" style = "background - attachment: fixed"> 
< bgsound src = "../music/sj.mp3" loop = "1"> 
< table align = "center" border = "2" width= "54 % " height = "50%" > 


< caption»« font size = "6" color = purple face = "华文 彩云 ">< b > 我 的 驿站 </b > </font > 
</caption> 


<tr align = center > 


background – image: url(../images/flower.gif); } 


< td colspan=1 rowspan=4 width= "47%" > 
< img border = "0" src = "../images/girl.png" width= "400" height = "411"></td> 
< td height = "100" colspan = 2 rowspan = 1 > 


< font size = "5" color = "pink" face = "方正 舒 体 "><b><i> 欢 迎 光 临 我 的 驿站 </i></b> 
</font ></Td> 


</tr> 
<tr align = center > 


< td height = "121" width= "15 $ "> <a href = "flower. htm" ><b> 我 的 花园 </b></a></td> 
< td width = "12 % "> < a href = "music. htm" ><b> 我 的 音乐 </b></a></td> </tr> 
<tr align = center > 
< td height = "85" width= "15 % " > <a href =" #" ><b> 我 的 football «/b»«/a»«/td» 
<td width= "12 % " > <a href = " # " ><b> 我 的 相册 </b></a></td> </tr> 
<tr align = center» < td width = "15 % " ><a href ="#"><b> 我 的 舍 友 </b></a></td> 
«td width= "12%" ><a href ="#"><b> 我 的 家 人 </b></a></td> </tr> 
</table> 
< center >< p>< font size = "2" color = green > 版 权 所 有 2015 — 2020 </font ></center > 
</body> 
</html> 


(2) 在 浏览 器 请 求 资源 ,观察 效果 ,体会 使 用 表格 进行 网 页 布局 的 方法 。test4. html 的 
运行 效果 如 图 2-4 所 示 。 
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图 2-4 test4. html 运行 效果 


(3) 拓展 实验 1: 

练习 编写 带 有 超 链接 的 HTML 文档 。 根 据 下 列 要 求 设计 并 输入 HTML 程序 : 

° 页 面 中 包含 带 有 文字 的 超 链接 ; 

。 页 面 中 包含 带 有 图 片 的 超 链接 ; 

。 页 面 中 包含 带 有 音乐 和 视频 文件 的 超 链 接 ; 

° 页 面 中 包含 带 有 髋 入 和 自动 载 信 的 音乐 或 视频 。 

(4) 拓展 实验 2; 

练习 使 用 表格 标记 及 其 常用 属性 。 设 计 一 个 不 少 于 3 行 4 列 的 表格 ,表格 的 内 容 可 以 
自由 发 挥 设 计 , 使 用 rowspan 和 colspan 合并 表格 。 其 主要 目的 是 熟悉 并 掌握 有 关 表 格 中 
各 种 标记 和 属性 的 使 用 方法 和 技巧 ,保存 为 table. html。 


实验 2.5 DIV 十 CSS 布局 实验 


【知识 要 点 回顾 】 


DIV 十 CSS 是 Web 设计 标准 ,是 一 种 网 页 的 布局 方法 。 与 传统 中 通过 表格 布局 的 方式 
不 同 , 它 可 以 实现 网 页 页 面 内 容 与 表现 相 分 离 。DIV 也 是 HTML 请 言 中 的 一 个 区 域 标记 ， 
CSS(Cascading Style Sheets, 层 释 样 式 表 ) 是 一 种 表现 形式 ,用 于 定义 HTML 元 素 的 显示 
形式 ,是 W3C 推出 的 格式 化 网 页 内 容 的 标准 技术 ,是 网 页 设计 者 必须 掌握 的 技术 之 一 。 
DIV 十 CSS 包含 如 下 技术 要 点 。 

CD 三 种 样式 表 调 用 方式 : 

通常 CSS 的 调用 采用 页 面 内 嵌 法 和 外 部 调用 法 和 内 联 样 式 表 调 用 法 三 种 。 

Ж ЕК: 就 是 将 样式 表 直 接 写 在 页 面 代 码 的 head 区 。 类 似 这 样 : 

< style type = "text/css"> 

a= 
body { background : white ; color : black ; } 
--> 
</style> 


<style> TR ELV H ЯЕ head 段 内 ,有 一 个 开始 和 结束 标记 ,可 以 有 多 个 过 style> 段 。 

外 部 样式 表 调 用 法 : 将 样式 表 写 在 一 个 独立 的 . ess 文件 中 。 例 如 ,新建 一 个 css/style. 
css 样式 文件 。 然 后 在 页 面 head 区 使 用 二 link 二 标记 调用 ,在 head 段 调 用 外 部 样式 表 的 引 
用 语法 如 下 : 

< link href = "css/style.css" type = "text/css" rel = "stylesheet"/> 

内 联 样式 表 法 : 直接 将 样式 写 在 标记 里 面 ,比如 要 使 Hl 的 内 容 变 红色 ,请 法 示例 如 下 ; 

<h1 style = "color:red; "> 红色 </hl > 

三 种 样式 表 优先 使 用 外 部 样式 表 。 嵌 入 式样 式 表 常 用 于 调试 , 较 少 使 用 内 联 样式 表 。 

(2) 样式 规则 : 

一 个 样式 规则 由 一 个 选择 器 后 跟 一 个 声明 块 组 成 ,声明 块 是 一 个 大 容器 ,由 大 括号 中 间 
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的 部 分 组 成 ,在 一 个 声明 块 内 可 以 有 多 个 声明 ,每 个 声明 用 冒号 开始 、 分 号 结束 。 
例如 : 


body { background : white ; color : black ; } 


(3) 选择 器 语法 格式 : 

元 素 选择 器 语法 格式 : 元 素 {color:blue; } 。 

类 选择 器 语法 格式 : .类 名 {属性 : 值 ;)。 

ID 选择 器 语法 格式 : #id 名 { 属 性 : 值 ; } ,注意 ID 名 不 能 重复 。 

通配符 选择 器 语法 格式 : * {属性 : 值 ;}。 

са) 伪 类 选择 器 : 伪 类 选择 器 用 来 定义 超 链 接 一 a 二 元 素 4 种 不 同 状态 的 样式 , 按 以 下 
顺序 依次 描述 : 

a:link: 未 访问 的 超 链接 的 选择 器 。 

a:visited: 已 访问 过 的 超 链接 的 选择 器 。 

a:hover: 鼠标 光标 放 在 其 上 的 超 链 接 的 选择 器 。 

a:active: 获得 焦点 的 超 链 接 的 选择 器 。 

如 果 需 要 ,也 可 以 组 合 这 几 个 状态 , 按 顺 序 写 : 

a:link,a:visited { color:blue;) 

a:hover,a:active ( color:blue;) 

(5) 选择 器 分 组 , 当 遇 到 几 个 选择 器 共享 一 个 声明 的 时 候 , 可 以 分 组 放 在 一 起 ,每 个 选 
择 器 必须 以 逗号 隔 开 。 

例如 ,hl,h2,h3,h4 { color red;})。 

选择 器 分 组 时 要 将 每 个 选择 器 路 径 写 全 ,分 组 结尾 不 能 有 逗号 。 

例如 : 

错误 写法 为 站 maincontent p. ull border-top:lpxsolid 井 ddd;} (路径 不 全 ) 。 

TE ff 55 33: JJ # maincontent р. # maincontent ul{ border-top:lpxsolid # 444; }. 

错误 写法 为 .al p. .al ul,{color:red;} (选择 器 分 组 结尾 多 了 一 个 逗号 ) 。 

(6) 伪 元 素 选择 器 ,标准 的 选择 器 不 能 格式 化 一 个 元 素 内 容 的 第 一 个 字母 或 第 一 行 ,而 伪 
元 素 选择 器 能 实现 。 所 有 浏览 器 支持 的 伪 元 素 选择 器 有 " :firstline” 和 *:first-letter” 两 种 。 

例如 : 

段落 的 第 一 行 : p:first-line {属性 : 值 ; ). 

段落 的 第 一 个 字母 : p:first-letter {属性 : 值 ; 1. 

(7) 关于 DIV 标记 : 

DIV 用 来 定义 文档 中 的 分 区 或 节 , 它 把 文档 分 割 为 独立 、 不 同 的 部 分 。DIV 是 一 个 块 
级 元 素 , 它 的 内 容 自 动 地 开始 一 个 新 行 。 实 际 上 ,换行 是 二 div 之 固有 的 唯一 格式 表现 。 可 
以 通过 一 div 之 的 class 或 id 应 用 额外 的 样式 ,class 用 于 元 素 组 (类 似 的 元 素 ,或 者 可 以 理解 
为 某 一 类 元 素 ) ,而 id 用 于 标识 单独 的 唯一 的 元 素 。 

fit JH DIV 十 CSS 布局 时 ,要 注意 以 下 两 点 : 

* DIV+ CSS 的 合理 之 处 在 于 可 以 进行 网 页 的 统一 设计 管理 ,通过 一 个 样式 表 , 牵 一 

发 而 动 全 身 , 只 要 修改 样式 表 , 就 可 以 统一 全 站 的 风格 ,如 果 为 一 个 页 面 单独 做 一 个 


样式 表 , 或 一 个 DIV 就 做 一 个 样式 表 , 没 有 全 局 设计 观念 ,那么 这 个 DIV 十 CSS 的 
设计 方式 就 完全 没有 必要 ,其 至 成 了 累 袭 。 
* 要 注意 DIV 十 CSS 对 浏览 器 的 兼容 性 。TABLE 设计 由 来 已 久 , 得 到 浏览 器 的 广泛 
支持 ,所 以 显示 效果 很 好 ,不 会 出 现 错位 情况 。 但 是 DIV 十 CSS 却 在 部 分 浏览 器 中 
会 发 生 页 面 错位 的 情况 ,因此 在 进行 设计 的 时 候 也 要 考虑 到 不 同 浏览 器 的 情况 , 进 
行 更 改 和 调试 。 
CSS 布局 与 传统 表格 布局 最 大 的 区 别 在 于 : 原来 的 定位 都 是 采用 表格 ,通过 表格 的 间 
距 或 用 无 色 透 明 的 GIF 图 片 来 控制 文 布局 版 块 的 间距 ; 而 现在 则 采用 层 来 定位 ,通过 层 的 
margin, padding, border 等 属性 来 控制 版 块 的 间距 。 
(8) CSS2 盒子 模型 : 
W3C 组 织 建议 把 所 有 网 页 上 的 对 象 都 放 在 一 个 盒子 中 ,设计 师 可 以 通过 创建 样式 定义 
来 控制 这 个 盒 的 属性 , 放 和 人 盒子 中 的 对 象 包括 段落 、 列 表 、 标 题 . 图 片 以 及 层 。 盒 模型 主要 定 
义 4 个 区 域 : 内 容 、 边 框 距 、 边 界 和 边 距 ,如 图 2-5 所 示 。 
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图 2-5 CSS2 盒子 模型 


【实验 任务 】 

编辑 HTML 网 页 文件 ,使 用 DIV 十 CSS 进行 页 面 布 局 。 
【实验 步骤 】 

(1) 编辑 如 下 test2. 5. 1. html 文件 ,观察 运行 效果 。 


<!DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3. org/ 

TR/xhtn11/DTD/xhtmll ~ transitional. dtd"> 

< html xnlns = "http://www. w3. org/1999/xhtml" lang = "gb2312"» 

<head> 

<title> 欢 迎 </title> 
< style type = "text/css"> 
二 一 
body ( margin: 0px; 

padding: 0px; 
background: url(./img/photo. jpg) # fefefe no- repeat right bottom; 
font- family: 'lucida grande', lucida sans unicode', ' 宋 体 ', ' 新 宋体 ,arial, verdana, 

sans - serif; 
color: #666; 
font - size:12px; 


LESE 
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line- height:150 % ;} 
#header{ margin: Opx auto; border: Opx; backdround: #ccd2de; width: 580px; 
height: 60px; } 
#mainbox { margin: Opx auto; width: 580px; backdround: #FFFFFF; } 


Ё 14 #menu{float: right; margin: 2px Opx 2px Opx; padding:0px Opx Opx Opx; 


width: 400px; backdround: #ccd2de; } 
#sidebar{ float: left; margin: 2px 2px Opx Opx; padding: Opx; backdround: #F2F3F7; 
width: 170px; } 
#content( float: right; margin: 1px Opx 2px Opx; padding:0px; width: 400px; 
backdround: #E0EFDE; } 
#footer( clear: both; margin: Opx auto; padding: 5px Opx 5px Opx; 
backdround: #ccd2de; height: 40px; width: 580px; } 
ses 
</style> 
</head> 
< body> 
< div іа = "header"> 这 里 是 header </div> 
< div іа = "mainbox"> 
< div id= "menu"> 这 里 是 menu </div > 
<div id= "sidebar"> 这 里 是 sidebar </div> 
<div id = "content"> 
< p>jX H Jë: #content </p> 
<p> 这 里 是 主要 内 容 ,根据 内 容 自动 适应 高 度 </p> 
<p> 这 里 是 主要 内 容 , 根 据 内 容 自动 适应 高 度 </p> 
<p> 这 里 是 主要 内 容 , 根 据 内 容 自 动 适应 高 度 </p> 
</div> 
</div> 
<div id= "footer"> 这 里 是 footer </div> 
</body> 
</html> 


运行 程序 ,观察 效果 ,如 图 2-6 所 示 。 


是 sidebar pel 
是 #content 
这 里 是 主要 内 容 ， 根 据 内 容 自 动 适应 高 度 
这 里 是 主要 内 容 ， 根 据 内 容 自动 适应 高 度 
这 里 是 主要 内 容 ， 根 据 内 容 自动 适应 高 度 


图 2-6 test2. 5. 1. html 运行 效果 


【 源 代码 分 析 】 


整个 页 面 的 body 的 样式 : 边框 边 距 为 0; 背景 颜色 为 #FEFEFE, 背 景 图 片 为 /img/ 
photo. jpg, 图 片 位 于 页 面 右 下 角 , 不 重复 ; 定义 字体 尺寸 为 12px; 字体 颜色 为 #666; 行 
高 150% 。 


整个 页 面 是 居中 显示 的 ,这 是 因为 在 # header, # mainbox, # footer 中 使 用 了 以 下 
属性 : 

“margin:0px auto;” 表 示 上 下 边 距 为 0, 左 右 为 自动 ,因此 该 层 就 会 自动 居中 了 。 

如 果 要 让 页 面 居 左 , 则 取消 auto 值 就 可 以 了 ,因为 默认 就 是 居 左 显示 的 。 通 过 margin: 
auto 可 以 轻易 地 使 层 自动 居中 。 

# mainbox 2 Y € menu. $ sidebar, # content 2455, ` # content 的 内 容 增 加 ， 
# content 的 高 度 就 会 增高 ,同时 # mainbox 的 高 度 也 会 撑 开 , # footer 层 就 自动 下 移 。 这 
样 就 实现 了 高 度 的 自 适应 。 

需要 注意 的 是 : # menu 和 # content 都 是 浮动 在 页 面 右 面 “FLOAT: right;". 
sidebar 是 浮动 在 井 menu 层 的 左面 “float:left;”, 这 是 浮动 法 定位 。 还 可 以 采用 绝对 定位 
来 实现 这 样 的 效果 。 

(2) 编辑 如 下 test2. 5. 2. html 文件 ,观察 运行 效果 。 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtm11/ 
DTD/xhtmll- transitional. dtd"> 
<html> 
<head> 
< neta http - equiv = "Content - Type" content = "text/html; charset = utf – 8" /> 
<title> 二 级 dropdown 弹出 菜单 </title> 
< style type = "text/css"> 
/* 设置 菜单 字体 及 边界 < / 
.menu (font - family: arial, sans- serif; width:750px; margin:0; margin:50px 0;} 
/* 设置 无 序列 表 的 margin 和 padding 为 零 * / 
.menu ul (padding:0; margin:0;list- style - type: none;] 
/* 控制 下 拉 列 表 菜 单 出 现 的 位 置 * / 
.menu ul li (float:left; position:relative;) 
/* 设 置 链接 样式 , (设置 背景 颜色 和 字体 大 小 等 ) */ 
.menu ul 11 а, .menu ul 11 a:visited { 
display:block; 
text – align:center; 
text – decoration:none; 
width:104px; 
height:30px; 
color: # 000; 
border:lpx solid # fff; 
border - width:lpx lpx 0 0; 
background: # c9c9a7; 
line- height:30px; 
font - size:llpx; 
} 
/* 设置 使 下 拉 ULRI */ 
.menu ul li ul (display: none; ) 
/* 设置 主 菜单 超 链接 样式 * / 
.menu ul li:hover a (color: # fff; background: # b3ab79; } 
/* 设置 子 菜单 样式 (显示 位 置 ) * / 


.menu ul li:hover ul { 
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display: block; 


position:absolute; 


top:31px; 
left:0; 
width:105px; 
} 


/* 设置 子 菜 单 超 链接 样式 < / 


.menu ul li:hover ul li a (display:block; background: # faeec7; color: # 000; } 


/* 设置 超 链接 悬 停 时 的 样式 < / 
.menu ul li:hover ul li a:hover (background: # dfc184; color: #000;} 


</style> 
</head> 
< body> 
< div class = "menu"> 
<ul> 


<li><a class = "hide" href = "../menu/ index. htm1">3⁄ Æ 01 </a> 


<ul> 
<1i><a href = "../menu/01 
<1i><a href = "../menu/02 


<li><a href = "../menu/03. 
<li><a href = "../menu/04 
<li><a href = "../menu/05 
<li><a href = "../menu/06 
<li><a href = "../menu/07 
<li><a href = "../menu/08 
<11><а href = "../menu/09. 


</ul ></1i> 


. html" 
. html" 
html" 
. html" 
. html" 
. html" 
. html" 
. html" 
html" 


title = "1 # page"> 子 菜单 01 </a></li> 
title = "2 # page"> 子 菜单 02 </a></1i> 
title= "3# page"> 子 菜单 03 </a></1i> 
title = "4 # page"> 子 菜单 04 </a></1i> 
title = "5 # page"> 子 菜单 05 </a></1i> 
title = "6 # page"> 子 菜单 06 </a></1i> 
title = "7 # page"> 子 菜单 06 </a></1i> 
title= "8 # page"> 子 菜单 07 </a></li> 
title = "9 井 page"> 子 菜单 08 </a></1i> 


<li><a class = "hide" href = "index.html"> 菜 单 2 </a> 


<ul> 
<li><a href = "../menu/11 


<li><a href = "../menu/12 
<li><a href = "../menu/13 
<li><a href = "../menu/14. 
<li><a href = "../menu/15. 
<li><a href = "../menu/16. 
<li><a href = "../menu/17 
<li><a href = "../menu/18 


<li><a href = "../menu/19 
</ul></li> 


. html" 
. html" 
. html" 


html" 
. html" 
. html" 
. html1" 


title= "1 # page"> 子 菜单 11 </a></1i> 
title= "2 # page"> 子 菜单 12 </a></1i> 
title= "3i page"> 子 菜单 13 </a></li> 
title= "4 # page"> 子 菜单 14 </a></1i> 
title= "5 # page"> 子 菜单 15 </a></1i> 
title = "6 # page"> 子 菜单 16 </a></1i> 
title = "7 # page"> 子 菜单 16 </a></1i> 
title= "8 # page"> 子 菜单 17 </a></li> 
title= "9 # page"> F Æ 18 </a></1i> 


<li><a class = "hide" href = "../layouts/ index. html"> 3 4 3 </a> 


<ul> 

<li><a href = "../menu/21 
<li><a href = "../menu/22. 
<li><a href = "../menu/23. 
<li><a href = "../menu/24. 
<li><a href = "../menu/25. 
<li><a href = "../menu/26. 
<li><a href = "../menu/27. 


</ul></li> 
<li><a class 
<ul> 


. html" 


title= "1 # раде"> F#M 21 </a></1i> 
title= "24 page"> 子 菜单 22 </a></1i> 
title= "34 page"> 子 菜单 23 </a></1i> 
title= "4 # page" F#M 24 </а></1і> 
title= "5 # раде"> 4 25 </a></1i> 
title = "6 # раде"> F M 26 </а></1і> 
title = "7 # раде"> -3E 27 </a></1i> 


"hide" href = "../boxes/index. htm1">3⁄ # 4 </a> 


<li><a href = "../menu/31. html" title= "1#page"> 子 菜单 31 </а></1і> 
<li><a href = "../menu/32. html" title = "2 # page"> 子 菜单 32 «/a»«/li» 
<li><a href = "../menu/33. html" title = "3 # page"> 子 菜单 33 </a></1i> 
<li><a href = "../menu/34. html" title = "4 # page"> 子 菜单 34 </a></1i> 
<li><a href = "../menu/35. html" title = "5 # page" T- 3E 35 </a></1i> 
</ul ></1i> 
</ul> 
</div> 
</body> 
</html> 


test2. 5. 2. html 运行 效果 如 图 2-7 所 示 。 


(3) 拓展 实验 : 
制作 如 图 2-8 所 示 框 架 的 首页 ,内容 不 限 ,要 求 使 用 背景 色 标 出 区 域 。 


2-7 test2. 5. 2. html 运行 效果 28 自我 练习 布局 要 求 图 


实验 2.6 简单 的 登录 页 面 设 计 
【实验 任务 】 


编辑 含有 表单 的 HTML 文件 ,采用 DIV 十 CSS 进行 用 户 登 录 界 面 布局 。 


【实验 步骤 】 
(1) 编辑 如 下 login. html X ff: 


<html> 
<head> 
<title > 综合 考评 系统 -登录 </title> 
< style type = "text/css"> 
body( margin- top: Opx; margin- left: Opx; ) 
.head{ background – image: ur1(../images/loginbg1. jpg); 
width: 100 % ; height: 130px; } 


body{ margin: Opx; text- align: center;background: # FFF; font- size: 12px; ) 
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a:link, a:visited(text — decoration: none; } 
a:hover( ) 


/* 页 面 层 容器 * / 
# container(width: 750px; height: 460px; margin: auto; padding - bottom: Opx; padding 
— top: 120px; 


background — image: url(../images/loginbg2. jpg); background – repeat: по – repeat; } 
Zright(float: right; width: 400px; top: 255px; left: 576px; } 
f container # right form table tr td div . style3 .style3(color: # 72CCF1; ) 
# container # right form table tr td div . style3( color: #72ССЕ1; } 
. style3{ width: 141px; font- size: 20px; vertical - align:middle; text – align:right ; 


.Style4(height: 88px; ) 
.style5(width: 141рх; font- size: 20px; vertical- align:middle; color: #72ССЕ1; } 
</style> 
< script language = "JavaScript" type = "text/javascript"> 
function Validator(theForm) { 
if (theForm.username.value == "") ( 
alert(" 请 输入 用 户 名 "); 
theForm. username. focus() ; 
return (false); } 
else if (theForm. password. value 
alert(" 请 输入 密码 "); 
theForm. password. focus(); 
return (false); } 


TON 


else return (true); 
) 
function keyDown() ( 
if (event.keyCode == 13) { 
if (event. srcElement. tagName. toLowerCase() == "textarea") { 
return false; ) 
else if (event. srcE1ement. name. toLowerCase() == "password") ( 
document. all.btnlogin.click(); 
return false; } 
event.keyCode = 9; 
return true; 


) 
document. onkeydown = keyDown; 
window. onload = function () ( 
var oInput = document.getElementById("username"); 
oInput. focus(); 
) 
</script> 
</head> 
< body> 
< div class = "head"></div > 
<div іа = "сопёаіпег"> 
<div іа = "right"> 
< form папе = "forml" method = "post" action = "cp. aspx" id = "forml" onsubmit = "return 
Validator(this)"> 
< table width = "104 €" border = "0" cellpadding = "6" cellspacing = "0"> 


<tr> « td colspan = "2" align = "center" class = "style4" valign= "top"> 
< span id = "LabTitle" style = "color: # 3333CC; font - family: # {Ж _GB2312; font - size: 
20pt;"> 
欢迎 登录 测评 系统 </span><br /><br /><br /> </td></tr> 
<tr><td><div style = "text - align: center"> 
< span class = "style3"> 用 户 名 :</span> 
< input class = "style5" style = "width:133px;" name = "username" type = "text" maxlength 
= "14" 
id= "username" tabindex = "1" /> </div></td> 
< td rowspan = "2">< div >< input style = "height:39px;" type = "submit" папе = "btnlogin" 
value = "# Ж" 
id= "btnlogin" tabindex = "3" /> &nbsp; </div ></td></tr> 
<tr> <td>< div style = "text - align: center">< span class = "style3"> 密 码 :</span> 
< input class = "style5" style = "width:133px;" name = "password" type = "password" 
maxlength = "14" id= "password" tabindex = "2" /»«/div»«/td»«/tr» 
</table> 
</form> <br /><br /><br /> </div> </div> 
<div> < table width = "100% "> 
<tr><td align= "center" style="height: 40px; font- size: 12px; color: #147233;" > 
&nbsp; 版 权 所 有 : 组 织 部 snbsp; 技 术 支 持 : <a href = "mailto: x@ 163. con" ># ЖН 
</а> &nbsp; 
版 本 2.0 更 新 时 间 2015.6.28 </td></tr> </table> </div> 
«/ body » 
«/htnl» 


(2) 运行 程序 ,观察 效果 ,如 图 2-9 所 示 o 


= DJ xi 


综合 考评 系统 


欢迎 登录 测评 系统 


图 2-9 登录 程序 运行 效果 图 
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实验 2.7 JS 前 端 验证 


【实验 任务 】 
编辑 HTML 文件 ,利用 JavaScript 在 客户 端 验 证 用 户 两 次 输入 的 密码 是 否 相 同 。 


【实验 步骤 】 
(1) 编辑 如 下 test2 7 1. html 文件 ,观察 运行 效果 ， 


<html> 
<head>< title» JavaScript 实验 </title> 
< script > 
function check() { 
with (document.a11) { 
if (input1. value != input2.value) { 
alert(" 两 次 输入 的 密码 不 一 致 !") 
inputl.value = ""; 
input2.value = ""; 
) else 
document. forms[ 0]. submit(); 
i 
) 
«/script» 
</head> 
< body> 
< FORM METHOD = POST ACTION = ""> 
请 输入 密码 : <input type = "password" іа = "inputl"> <br> 
请 再 次 输入 密码 : < input type = "password" id= "input2"> 
< input type = "button" value = "提交 ”onclick = "check()"> 
</ЕОВМ > 
</body> 
«/htnl > 


(2) 运行 程序 ,效果 如 图 2-10 所 示 。 
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图 2-10 JS 前 端 验 证 


实验 2.8 纯 JS 的 日 历 选 择 器 


【实验 任务 】 


编辑 uc. js 文件 ,实现 日 历 选择 器 功能 ,在 HTML 页 面 调用 日 历 选择 器 uc. js. 


【实验 步骤 】 


CD 编辑 如 下 uc. js 文件 : 


function NtuCalendar (sName, sDate) 


{ 
// 定 义 NtuCalendar 对 象 的 属性 并 赋 默 认 值 


//inputValue 属性 的 值 为 "today" 时 表示 (客户 机 ) 当 前 日 期 
// 直 接 在 这 里 把 默认 值 修改 成 想 要 的 值 ,使 用 时 就 什么 也 不 用 设置 了 


this.inputName = sName || "ntuDate" 
this. inputValue = sDate || ""; 
this. inputSize = 10; 


this.inputClass = ""; 
this.color = " # #5555"; // 日 历 文字 颜色 
this.bgColor = "#eeeeee"; // 日 历 背 景色 


this.buttonWidth = 60; 
this.buttonWords = "Ж#Н"; 
this. canEdits = true; 
this.hidesSelects = true; 

// 定 义 display Jj ik 
this.display = function () 

{ 


var reDate = /^(19[7 - 9]\9|20[0 - 5 ]\9)\ - (0?\911[0-– 2])\ – ([0 – 2]?\913[01]) $ /; 


if (reDate. test(this. inputValue)) 

{ 
var dates = this. inputValue. split(" – "); 
var year = parseInt(dates[0], 10); 
var month = parseInt(dates[1], 10); 
var mday = parseInt(dates[2], 10); 

) 

else 

( 
var today = new Date(); 
var year = today.getFullYear(); 
var month = today.getMonth() * 1; 
var mday - today.getDate(); 

) 

if (this.inputValue == "today") 


inputValue = year + "-" + month + "-" + mday; 


else 

inputValue - this. inputValue; 
var lastDay = new Date(year, month, 0); 
lastDay 7 lastDay.getDate(); 
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var firstDay = new Date(year, month-1, 1); 
firstDay = firstDay.getDay(); 
var btnBorder = 
"border - left:1px solid" + this.color + ";" + 
"border - right:lpx solid" + this.color + ";" + 
"border – top:lpx solid" + this.color + ";" + 
"border - bottom:lpx solid" + this.color + ";"; 
var btnStyle = 
"padding - top: 3px; cursor: default; width:" + this. buttonWidth + "px; text - align: 
center;height:18px;top: – 9рх;" + 
"font: normal 12px Ж Ж; position: absolute; z - index: 99; background - color:" + this. 
bgColor + ";" + 
"line – height:12px;" + btnBorder + "color:" + this.color + ";"; 
var boardStyle = 
"position: absolute; width: 1px; height: 1рх; background: " + this. bgColor + ";top:8px; 
border:lpx solid "+ 
this.color + ";display:none;padding:3px;"; 
var buttonEvent = 
" onmouseover = \"this. childNodes[ 0]. style. borderBottom = '0рх';" + 
"this. childNodes[1]. style. display = ''; this. style. zIndex = 100;" + 
(this. hidesSelects ? 
"var slts = document. getElementsByTagName( 'SELECT');" + 
"for(var і = 0;i< slts. length; i++)slts[i]. style. visibility = 'hidden';" 
("т") + At 
" onmouseout = V'this.childNodes[0]. style. borderBottom = '1рх solid " + this.color + "';" + 
"this.childNodes[1]. style. display = 'none';this.style.zIndex=99;" + 
(this. hidesSelects ? 
"var slts = document. getElementsByTagName( 'ЅЕГЕСТ');" + 
"for(var і = 0;i« slts.length;i-*)slts[i].style.visibility- '';" 
("т") uto 
" onselectstart = V'return false;V""; 
var ndayStyle - "font:normal 9px Verdana, Arial, Rik; line- height: 12px; cursor :default; 
color:" + this.color; 
var weekStyle = "font:normal 12px Ж Ж; line - height: 15px; cursor: default; color:" + 
this. color; 
var arrowStyle = "font:bold 7px Verdana, % [& ; cursor: hand; line - height: 16px;color:" + 
this. color; 
var ymStyle = "font:bold 12px 宋体 ; line - height: 16px; cursor: default; color:" + this. 
color; 
var changeMdays = 
"var year = parseInt(this. parentNode. cells[2].childNodes[0]. innerText);" + 
"var month = parseInt(this. parentNode. cells[2].childNodes[2]. innerText);" + 
"var firstDay = new Date( year, month- 1, 1) ;firstDay = firstDay.getDay();" + 
"var lastDay = new Date( year, month, 0) ;lastDay = lastDay.getDate();" + 
"var tab = this. parentNode. parentNode, day = 1;" + 
"for(var row-2;row«8;rowt*)" + 
" for(var col = 0;со1 < 7;со1++){" + 
id if(row-- 2&&col«firstDay)(" + 
* tab. rows[row].cells[col]. innerHTML = '&nbsp; ;" + 
E tab.rows[row].cells[col].isDay- 0;}" + 
kd else if(day< = lastDay)(" + 


tab. rows[row].cells[col]. innerHTML = day;" + 
tab. rows[row].cells[col]. isDay= 1;day**;)" + 
" else(" * 
tab. rows[row].cells[col]. innerHTML- '';" + 
tab. гоиѕ[ гои]. се115[со1]. іѕрау = 0;}" + 
р 
var pyEvent = 
" onclick = V'var у = this. parentNode. ce11s[ 2]. childNodes[0]; у. innerText = parseInt(y. 
innerText) -1;" + 
changeMdays + "\""; 
var pmEvent = 
" onclick = V'var y = this. parentNode. cells[2]. childNodes[0];m = this. parentNode. cells 
[2].childNodes[2];" * 
"n. innerText = parseInt(m. innerText) — 1; if(m. innerText == '0') (m. innerText 
712;y.innerText =" + 
"parseInt(y.innerText) – 1;}" + changeMdays + "\""; 
var nmEvent = 
" onclick = V'var y = this. parentNode. се115[2]. childNodes[0];m = this. parentNode. cells 
[2].childNodes[2];" * 
"m. innerText = parseInt (m. innerText) + 1; if (m. innerText == '13') (m. 
innerText = 1;y. innerText =" + 
"parseInt(y.innerText) +1;}" + changeMdays + "\""; 
var nyEvent = 
" onclick = V'var у = this. parentNode. ce11s[ 2]. childNodes[0]; y. innerText = parseInt(y. 
innerText) +1;" + 
changeMdays + "\""; 
var mdayEvent = 
onmouseover = \" if (event. srcElement. tagName == 'TD'&&event. srcElement. isDay)(" + 
"event. srcE1ement. style. backgroundColor = '" + this.color + "';" + 
"event. srcElement. style. color = '" + this.bgColor + "';" + 
"event. srcE1ement. style. cursor = 'hand';" + 
"var ym = event. srcE1ement. parentNode. parentNode. rows[0].cells[2].childNodes;" + 


"event. srcElement. title = ym[ 0]. innerText + ' — ' + ym[ 2]. innerText + ' — ' + event. 
srcElement. innerText;)N"" + 
" onmouseout = \" if (event. srcElement. tagName == 'TD'&&event.srcElement. isDay)(" + 
"event. srcElement. style. backgroundColor = '" + this. bgColor + "';" + 
"event. srcElement. style. color = '" + this.color + "';" + 


"event. srcElement. style. cursor = 'default';" + 

"var уп = event. srcE1ement. parentNode. parentNode. rows[0].cells[2].childNodes;" + 

"event. srcE1ement. title = ym[ 0]. innerText + ' — ' + ym[ 2]. innerText + ' — ' + event. 
srcElement. innerText;}\"" + 

" onclick = \"if(event. srcElement. tagName == 'TD'&&event. srcElement. isDay){" + 

"var inp= this. parentNode. parentNode. parentNode. previousSibling. childNodes[0];" + 

"inp. value = this. rows[0].cells[2].childNodes[0]. innerText + '— ' + this. rows[0]. 
cells[2].childNodes[2]." + 

"innerText + '— '+ event. srcElement. innerText;" + 

"this. parentNode. style. display = 'none';this. parentNode. parentNode. style. zIndex = 99;" + 

"this. parentNode. previousSibling. style.borderBottom = '1рх solid" + this.color + "';" + 

(this. hidesSelects ? 

"var slts = document. getE1ementsByTagName( 'SELECT');" + 

"for(var і = 0;i« slts.length;i-*)slts[i].style.visibility- '';" 
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шы Ж ш; 
var output = ""; 
output += "< table cellpadding = 0 cellspacing = 1 style = 'display: inline; »« tr»"; 
output += " < td >< input size =" + this. inputSize + " maxlength = 10 value = \"" + 

inputValue + "N""; 
output +=  (this.canEdits ? "" : " readonly") + " name=\"" + this.inputName + "\"></td>"; 
output += " <td width=" + this.buttonWidth + ">"; 
output += " < div style = \" position: absolute; overflow: visible; width: Opx; height: Opx; \"" + 
buttonEvent + ">"; 
output += "«divstyle- V'" + btnStyle + "N"><nobr>" + this.buttonWords + "</nobr > 
</div>"; 
output += " <div style- V'" + boardStyle + "N">"; 
output += "<table cellspacing- 1 cellpadding = 1 width=175" + mdayEvent + ">"; 
output += "<tr height = 20 align = center >"; 
output += "«tdstyle- V'" + arrowStyle + "N" title- V' E—#EN"" + pyEvent + "> &lt; 
&lt;</td>"; 
output += " «td style = \"" + arrowStyle + "N" align= left title=\" 上 个 月 \"" + 
pmEvent + "> &lt;</td>"; 
output += "<td colspan=3 style- V'" + ymStyle + "N" valign = bottom>"; 
output += " <span>" + year + "</span>< span> 年 </span>< span>" + month + "</span> 
< span > 月 </span >"; 
output += " «/td»"; 
output += " «td style = \"" + arrowStyle + "N" align = right title = \" 下 个 月 \"" + 
nmEvent + "> &gt;«/td»"; 
output += "<td style- V'" + arrowStyle + "N" title=\" 下 一 年 \"" + nyEvent + "> 89; 
&gt;c/td»"; 
output += " </tr>"; 
output += " <tr height = 20 align = center bgcolor = " 
output += " <td width=14% style=\"" + weekStyle 
output += " <td width=14% style=N"" + weekStyle 
output += " <td width=14% style=\"" + weekStyle 
output += " <td width=14% style=\"" + weekStyle 
+ 
+ 
+ 


this. bgColor + ">"; 
"\">H </td>"; 
"\">—</td>"; 


output += " <td width=14% style=\"" + weekStyle 
output += " <td width=14% style=\"" + weekStyle 
output += " <td width=14% style=\"" + weekStyle 
output += " </tr>"; 

var day = 1; 

for (var row= 0; row« 6; row++) 


"NA"> 四 </td>"; 
"\"> 五 </td>"; 
"\"> 六 </td>"; 


+ ++ ++ + + + 


{ output += "<tr align = center>"; 
for (var col = 0; col <7; col++) 
{ if (row == 0 && col < firstDay) 
output += "<td style=\"" + mdayStyle + "\"> gnbsp;</td>"; 
else if (day <= lastDay) 
{output += "<td style=\"" + mdayStyle + "\" isDay=1>" + day + "</td>"; 


day++; } 
else 

output += "<td style=\"" + mdayStyle + "\"></td>"; 
} 
output += "</tr>"; 


} 
output += " </table>"; 


output += "</div>"; 
output += " </div>"; 
output += "</td>"; 
output += "</tr></table>"; 
document. write(output); 
} 
} 


(2) 编辑 如 下 test. html 文件 : 


<html> 
< head> 
< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
«title» JavaScript Calendar, JS 日 期 选择 器 ,JS 日 历 插件 </title> 
< script src = ../js/uc. js></script> 
< script language = javascript > 
// 注 意 , 这 里 的 纯 JavaScript 的 日 期 选择 器 文件 uc. js, 保存 在 /js 路 径 下 
// 实 例 化 时 第 一 个 参数 是 input 的 nane; 第 二 个 参数 是 value, 设 为 "today" 就 是 当天 
var datel = new NtuCalendar ("date", "2015 – 03 - 08"); 
datel.display(); // 直 接 显示 JS 日 期 选择 器 
</script> <br><br> 
< script language = javascript> 
// 灵 活 定制 一 些 属性 ,再 次 显示 JS 日 期 选择 器 
// 事 实 上 直接 到 uc. js 中 修改 默认 属性 值 使 用 起 来 会 更 方便 一 些 ,里 面 有 注释 
var date2 = new NtuCalendar (); 


date2. inputName = "date"; //input 的 name 
date2.inputValue = "today"; / input 中 显示 客户 机 系统 当前 时 间 
date2. inputSize = 10; //input 的 size 
date2. inputClass = ""; //input 的 class, 这 样 你 就 能 自己 控制 input 的 样式 
date2. color = "#000080"; // 选 择 按 钮 面板 的 边框 以 及 日 历 中 字 的 颜色 
date2.bgColor = "#ffdd66"; // 选 择 按钮 .面板 的 背景 色 
date2.buttonWidth = 60; // 按 钮 宽度 
date2.buttonWords = "Ж#Н Я"; // 按 钮 显示 的 文字 
date2.canEdits = false; //input 是 否 可 以 输入 
date2. hidesSelects = true; // 显 增 日 期 选择 面板 时 是 否 隐 藏 页 面 中 的 select 控件 
date2. display(); 
</script > 
</head> 
<body><br><hr> 


直接 使 用 日 期 选择 器 : <br> 

< script language = javascript > datel.display();</script><br> 
修饰 后 的 日 期 选择 器 : <br> 

< script language = javascript > date2.display(); </script><br> 

< hr ><br >< table border = "1" > 

<tr> <td> 姓 名 </td>< td> 出 生日 期 </td>< td> 专 业 </td>< td> 毕 业 日 期 </td></tr> 

«tr» <td> 张 小 章 </td>< {а >< script language = javascript > datel. display();</script > 
</td> 

<td> 李 小 理 </td> 

< td>< script language = javascript > date2. display( ) ;</script ></td></tr> 

</table><br> 
纯 JavaScript 写 的 日 期 选择 器 (JS 日 历 插件 ) 希 望 大 家 喜欢 。 
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</body> 
</html> 
纯 JS 的 日 历 选择 器 运行 效果 如 图 2-11 所 示 。 
[015-03-08 [ER 
rrr “©ту; 


СРУ ЕР: 
直接 使 用 日 期 选择 器 ， 8 э 10 11 12 13 14 
[2015-03-08 [ЖЕНЕ 15 i16 i7 18 19 20 21 
3 22 23 24 25 26 27 28 

修饰 后 的 日 期 选择 器 ， 23 so 3i 
[2015-3-2 


ka | 出 生日 期 [К [ЕЗУНИ 
БЕЛЖ [2015-03-08 [EFEN] | 李 小 理 [2015-3-2_ [HEREIN 


纯 JavaScript 写 的 日 期 选择 器 (JS 日 历 插件 ) 希望 大 家 喜欢 。 


2-11 纯 JS 的 日 历 选择 器 


第 3 章 Java Web 开发 环境 搭建 


Tomcat 是 一 个 小 型 的 轻 量 级 应 用 服务 器 ,在 中 小 型 系统 和 并 发 访问 用 户 不 是 很 多 的 
场合 下 被 普遍 使 用 ,对 Java 初学 者 来 说 , Tomcat 是 开发 和 调试 JSP 程序 的 首选 , 随 着 
Tomcat 新 版 本 的 不 断 发 布 ,Tomcat 在 企业 Web 应 用 服务 器 市 场 上 的 份额 也 越 来 越 大 。 

在 Tomcat 中 ,应 用 程序 的 部 署 很 简单 ,只 需 将 WAR 或 整个 应 用 程序 目录 放 到 Tomcat 的 
webapps 目录 下 ,Tomcat 会 自动 检测 到 这 个 文件 ,如 果 是 WAR 包 ,Tomcat 将 自动 将 其 解压 。 
在 浏览 器 中 访问 这 个 应 用 的 JSP 时 ,通常 第 一 次 会 很 慢 , 因 为 Tomcat 要 将 JSP 转换 成 
Servlet 类 文件 ,然后 编译 为 Servlet 类 文件 。 后 面 访问 编译 后 的 文件 ,速度 会 很 快 。 另 外 
Tomcat 也 提供 了 一 个 应 用 manager, 访 问 这 个 应 用 需要 用 户 名 和 密码 ,用 户 名 和 密码 存储 
在 一 个 XML 文件 中 。 通 过 这 个 应 用 ,辅助 于 FTP, 可 以 在 远程 通过 Web 部 署 和 撤销 应 用 。 


实验 3.1 第 一 个 JSP 动态 网 页 


【实验 任务 】 
编写 基本 JSP 动态 网 页 ,要 求 运行 页 面 运 行 时 ,根据 当前 系统 时 间 输 出 相应 问候 语 。 
【实验 步骤 】 


(1) 编辑 如 下 date. jsp 程序 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "gbk" % > 
<html> 
<head> 
«title» Date </title> 
</head> 
<body> 
<% 
//Calendar 这 类 来 表示 时 间 , 现 在 更 常用 ,所 以 选择 使 用 了 它 
Calendar date = Calendar. getInstance(); // 得 到 Calendar 对 象 ,不 能 简单 地 用 new 来 创建 
int year = date.get(Calendar. YEAR); 


int month = date.get(Calendar. MONTH) * 1; // 月 , 需 +1 来 调整 
int day = date.get(Calendar.DATE); // 日 

int weekDay = date.get(Calendar.DAY OF WEEK) – 1; // BE MB JL 

String[] sweekDay = ("H","—","—","—","V","m","A"); // 将 英文 表示 为 中 文 
int hour = date.get(Calendar.HOUR OF DAY); // 得 到 现在 是 几 点 


"n, 
; 


String weclome = 
if(hour > = 0&&hour < 12) ( 
weclome = "ЕЕ"; } 
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elseif(hour > 12&&hour < 18) ( 
weclome = "БАЕ"; } 
else( 
weclome = "KE"; ) 
%> 
<% -- 将 时 间 按 格式 显示 出 来 -- %> 
<% =weclome > 好 ! 今 天 是 <% = year %>#E<% = month% >J <% = day%> 日 ,星期 <% = sweekDay 
[weekDay] %> 
</body> 
</html > 


(2) 浏览 器 输入 URL ,请 求 资源 ,观察 显示 效果 。 


实验 3.2 WAR 包 及 发 布 


【实验 任务 】 

将 MyEclipse 下 建立 的 JSP Web 项 目 生成 WAR 包 ,在 Tomcat 下 部 署 发 布 。 
【实验 步 又】 

(1) 首先 是 使 用 MyEclipse 将 Web 项 目 打包 ,如 图 3-1 所 示 。 


图 3-1 项 目 生 成 WAR 包 


(2) 右键 选中 项 目 , 选 择 Export 项 。 
(3) 然后 选择 Java EE WAR File。 单 击 Next 按钮 。 
(4) 指定 WAR 包 的 存放 路 径 , 如 图 3-2 所 示 。 


Export ioj xi TAR Export 
WAR Export 
Brpert JFE web project resources as WAR 


file to local file system 
Bm General 


80-25 Database 


图 3-2 指定 WAR 包 的 存放 路 径 


(5) 打包 完成 以 后 将 WAR 文件 直接 放 到 Tomcat 的 webapps 目录 下 即 可 ,如 图 3-3 


所 示 。 
=a 


世故 在 Tonacat 的 vebapps 下 
|Jfreechar tCher t 

Iis 

B 
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(6) 运行 Tomcat。 在 浏览 器 输入 URL 进行 测试 ,和 正常 的 Web 项 目 发 布 相同 。 


Java Web 开发 环境 搭建 


Bow 
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一 个 JSP 页 面 可 由 普通 的 HTML 标记 、JSP 标记 、 成 员 变量 与 方法 的 声明 、Java 程序 
片 和 Java 表达 式 组 成 。JSP 引擎 把 JSP 页 面 中 的 HTML 标记 交 给 客户 的 浏览 器 执行 显 
ms JSP 引擎 负责 处 理 JSP 标记 、 变 量 和 方法 声明 ; ISP 引擎 负责 运行 Java 程序 片 . 计 算 
Java 表达 式 ,并 将 需要 显示 的 结果 发 送 给 客户 的 浏览 器 。 

JSP 页 面 中 的 成 员 变 量 是 被 所 有 用 户 共享 的 变量 。Java 程序 片 可 以 操作 成 员 变 量 , 任 
何 一 个 用 户 对 JSP 页 面 成 员 变量 操作 的 结果 ,都 会 影响 到 其 他 用 户 。 如 果 多 个 用 户 访 问 一 
个 JSP 页 面 ,那么 该 页 面 中 的 Java 程序 片 就 会 被 执行 多 次 ,分 别 运行 在 不 同 的 线程 中 , 即 运 
行 在 不 同 的 时 间 片 内 。 和 运行 在 不 同 线程 中 的 Java 程序 片 的 局 部 变量 互 不 干扰 , 即 一 个 用 户 
改变 Java 程序 片 中 的 局 部 变量 的 值 不 会 影响 其 他 用 户 Java 程序 片 中 的 局 部 变量 。 


【实验 目的 】 


本 章 实验 的 目的 是 让 学 生 掌 握 怎样 在 JSP 页 面 中 使 用 JSP 标签 ,重点 掌握 怎样 使 用 
Java 程序 片段 JSP 表达 式 以 及 JSP 内 置 对 象 , 熟 练 掌握 JSP 的 程序 设计 方法 。 


实验 4.1 JSP 程序 段 


【实验 任务 】 


编写 两 个 JSP 页 面 ,JSP 文件 分 别 为 inputName. jsp 和 visitperson. jsp. 

inputName. jsp 的 具体 要 求 : 该 页 面 有 一 个 表单 ,用户 通 过 该 表单 输入 自己 的 姓名 并 提 
交 给 visitperson. jsp 页 面 。 

visitperson. jsp 页 面 的 具体 要 求 : 该 页 面 有 名 字 为 person、 类 型 是 StringBuffer 以 及 名 
字 是 count, 类 型 为 int 的 成 员 变量 。 页 面包 含 public void judge() 方 法 。 该 方法 负责 创建 
person 对 象 , 当 count 的 值 是 0 时 ,judge() 方 法 创建 person 对 象 。 页 面包 含 public void 
addPerson(String p) 方 法 ,该 方法 将 参数 p 指定 的 字符 串 尾 加 到 操作 成 员 变量 person ,同时 
将 count 作 自 增 运算 。 

visitperson. jsp 页 面 在 JSP 程序 段 中 获取 inputName. jsp 页 面 提交 的 姓名 ,然后 调用 
judge() 创 建 person 对 象 、 调 用 addPerson 方法 将 用 户 的 姓名 追加 到 成 员 变量 person, 

如 果 inputName. jsp 页 面 没有 提交 姓名 ,或 姓名 含有 的 字符 个 数 大 于 10, 就 使 用 二 jsp: 
forward 二 标记 将 用 户 请 求 转 到 inputName. jsp И. 

通过 JSP 表达 式 输出 person 和 count 的 值 。 


【实验 步骤 】 


(1) 分 别 编写 如 下 inputName. jsp 和 visitperson. jsp 代码 。 
inputName. jsp 参考 代码 如 下 : 


<% (à раде contentType = "text/html;charset = utf 一 8" %> 
<html> 
< body bgcolor = cyan > 
< font size = 3» 
< form action = "visitperson. jsp" method = "get"> 
请 输入 姓名 : 
< input type = "text" name = "name">< br > 
< input TYPE = "submit" value = "加 入 到 访问 者 行列 "> 
</form> 
</body> 
</һа1 > 


visitperson. jsp 参考 代码 如 下 : 


<% (à page contentType = "text/html;charset = utf - 8" %> 
<html> 
< body bgcolor = yellow > 
<% ! int count; 
StringBuffer person; 
public void judge() ( 
if (count == 0) 
person = new StringBuffer(); 
} 
public void addPerson(String р) { 
if (count == 0) { 
person. append(p) ; 
) eise ( 
person.append("," * p); 
) 


count**; 
}%> 
<% 
String name = request. getParameter("name"); 
byte ЬЫ] = папе. getBytes(" iso- 8859 - 1"); 
name = new String(bb, "utf – 8"); 
if (name == null||name.length() == 0 || name.length() > 10) ( 
E» 
< jsp: forward page = " inputName. jsp" /> 
<% 
} 
judge(); 


addPerson(name) ; 
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<br> 目前 共有 <% = count %> 人 访问 过 该 站 点 ,他 们 的 名 字 是 : < br > 
< font size=3><% = person $»«/font»«p» 
<a href = "inputName. jsp"> 返 回 inputName. jsp 页 面 </a><p> 
</body> 
</html> 


(2) 在 地 址 栏 输入 访问 URL 地 址 ,观察 浏览 器 显示 效果 ,如 图 4-1 所 示 。 


目前 共有 7 人 访问 过 该 站 点 ， 他 们 的 名 字 : 


TAR , 王 明 明 , 陆 小 军 , 曾 小 利 , 王 小 进 ， Hp 


4 统计 访问 站 点 人 数 


(3) 拓展 实验 : 
修改 程序 ,将 访问 者 显示 方式 改 为 表格 形式 显示 。 


实验 4.2 JSP 指令 标记 


page 指令 : 二 %@ page 属性 1=" 属 性 1 的 值 " 属性 2 二 "属性 2 的 值 "…% 二 用 来 定 
义 整个 JSP 页 面 的 一 些 属性 和 这 些 属性 的 值 。 比 较 常 用 的 两 个 属性 是 content Type 和 
import, page 指令 只 能 为 content Type 指定 一 个 值 ,但 可 以 为 import 属性 指定 多 个 值 。 

content Type 是 让 浏览 器 知道 对 于 下 载 的 文件 要 保存 为 什么 类 型 的 文件 。 当 然 , 真 正 
的 文件 还 是 在 流 里 面 的 数据 , 设 定 一 个 下 载 类 型 并 不 会 去 改变 流 里 的 内 容 。 

include 指令 标记 : 二 %@ include file= "ЖЕН URL" % > ЕН Е JSP 页 面 出 现 
该 指令 的 位 置 处 ,静态 插入 一 个 文件 。 被 插入 的 文件 必须 是 可 访问 和 可 使 用 的 ,如 果 该 文件 
和 当前 JSP 页 面 在 同一 Web 服务 目录 中 ,那么 “文件 的 URL” 就 是 文件 的 名 字 ; 如 果 该 文 
件 在 JSP 页 面 所 在 的 Web 服务 目录 的 一 个 子 目录 中 ,比如 fileDir 子 目录 中 ,那么 “文件 的 
URL” 就 是 “fileDir/ 文 件 的 名 字 ”。include 指令 标记 是 在 编译 阶段 就 处 理 所 需 要 的 文件 ,被 
处 理 的 文件 在 逻辑 和 语法 上 依赖 于 当前 JSP 页 面 ,其 优点 是 页 面 的 执行 速度 快 。 


【实验 任务 】 


编写 三 个 JSP 页 面 : first. jsp、second. jsp 和 third. jsp。 另 外 ,要 求 用 “记事 本 ”编写 一 
个 文本 文件 hello. txt。hello. txt 的 每 行 有 若干 个 英文 单词 ,单词 之 间 用 空格 分 隔 ,每 行 之 
IR] FH" — br ”分隔 。 

first. jsp 的 具体 要 求 : first. jsp 使 用 page 指令 设置 contentType 属性 的 值 是 “text/ 
plain”, 使 用 include 指令 静态 插入 hello. txt 文件 。 

second. jsp 的 具体 要 求 : second. sp 使 用 page 指令 设置 contentType 属性 的 值 是 
"application/ mspowerpoint" ,使 用 include 指令 静态 插入 hello. txt 文件 。 

third. jsp 的 具体 要 求 : third. jsp 使 用 page 指令 设置 contentType 属性 的 值 是 


“application/msword”, 使 用 include 指令 静态 插入 hello. txt 文件 。 
本 实验 的 目的 是 让 学 生 掌 握 怎样 在 JSP 页 面 中 使 用 include 指令 在 JSP 页 面 中 静态 插 
入 一 个 文件 的 内 容 , 体 会 page 指令 content Type 属性 值 的 作用 。 


【实验 和 步骤】 


(1) 编写 文本 文件 hello. txt 和 三 个 JSP 页 面 : first. jsp.second. jsp 和 third. jsp. 
hello. txt 参考 代码 如 下 : 


package apple void back public 
<br> 


private throw class hello welcome 
first. jsp 参考 代码 如 下 : 


<% @ page contentTYpe = "text/plain" %> 
< HTML > 
< BODY > 
<FONT size = 4 color = blule> 
<% @include file = "hello. txt" %> 
</FONT> 
</BODY> 
</HTML> 


second. jsp 参考 代码 如 下 : 


<% (à page contentType = "application/vnd.ms - powerpoint" %> 
< HTML» 
< BODY > 
< FONT size = 2 color = blule > 
<% @include file = "hello. txt" %> 
</FONT> 
</BODY> 
</HTML> 


third. jsp 参考 代码 如 下 : 


<% (à page contentType = "application/msword" %> 
<HTML> 
< BODY > 
< FONT size = 4 color = blule > 
<% @include file = "hello. txt" %> 
</FONT> 
</BODY> 

</HTML> 


(2) 在 地 址 栏 输入 URL 34 € jul AERAR. IK: Page 指令 contentType 属性 的 
作用 。 


Hay 
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first. jsp 运行 效果 如 图 4-2 所 示 。 


http://localhost:8080/jspsz/ch04/first ЧТ 


(JO 


nantong university jiangsu china 
private throw class hello welcome Ë 


到 
[I T Г 由 et a [sa - ¿ 
图 4-2 contentType 属性 测试 


second. jsp 运行 效果 如 图 4-3 所 示 。 
GO Ei 


图 4-3 second. jsp 运行 效果 


people. jsp 运行 效果 如 图 4-4 所 示 o 


solxl| E3 


nantong university jiangsu china + 
private throw class hello welcome + 


图 4-4 people. jspCcontentType 的 值 是 application/ msword)32 17 AR. 


实验 4.3 JSP 表格 实验 


【实验 任务 】 


使 用 JSP 程序 段 动态 生成 表格 ,表格 数据 来 自 数 组 或 集合 类 容器 ,为 从 数据 库 获取 数 
据 做 准备 ,如 图 4-5 所 示 。 

集合 类 是 容器 类 的 数据 结构 ,包括 List、Map、Set。 

List: 按 对 象 进 入 的 顺序 保存 对 象 , 不 做 排序 或 编辑 操作 。 其 中 的 值 允许 重复 ,因为 其 


实体 类 


| | | | | | 


45 表格 数据 来 自 数 组 或 List 容器 


为 有 序 的 数据 结构 。 
Map; 是 基于 “ 键 " 的 成 对 数据 结构 , 键 值 必须 具有 唯一 性 ( 键 不 能 相同 ,否则 值 会 被 替换 )。 
Set: 对 每 个 对 象 只 接受 一 次 ,并 使 用 自己 内 部 的 排序 方法 。 其 中 的 值 不 允许 重复 , 它 
是 无 序 的 数据 结构 。 
List 和 Set 是 由 Collection 接口 派生 的 两 个 接口 。 


【实验 步骤 】 


(1) 编写 实体 类 bean/Student. java, 
Student. java 参考 代码 如 下 : 


package bean; 
public class Student ( 
private String xh; 
private String name; 
private String teleno; 
public Student(){ ) 
public Student (String xh, String name, String teleno)( 
this. xh = xh; 
this. name = name; 
this. teleno = teleno; 
) 
public String getXh() (return xh;} 
public void setXh(String xh) (this.xh = xh;} 
public String getName() (return name;] 
public void setName(String name) {this.name = name; } 
public String getTeleno() (return teleno;] 
public void setTeleno(String teleno) (this.teleno = teleno;] 
] 


CD 编写 JSP 表格 程序 ,表格 中 的 数据 分 别 来 自 数组 和 List 容器 。 
table. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 第 
<% @ page import = "bean. Student" % > 4 
<html> 章 
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<body> 
<% 
// 数 组 中 预先 准备 好 数据 
Student[] stu = ( new Student("001"," 欧 巴 马 ", "13844488101"), 
new Student("002"，" 李 刚好 "，"13848888108")， 
new Student("003"，" 胡 规范 "，"18844488158") }; 
//List 中 预先 准备 好 数据 
List lstu = new ArrayList(); 
lstu.add(new Student("2101"," 黄 晓 敏 "，"18843488111")); 
lstu. add(new Student("2103"," 季 试 第 ","18844488103")); 
lstu. add(new Student("2104"，" 章 里 好 "，"18745488145") ) ; 
$> 
从 数组 中 取出 数据 放 入 表格 中 
< table border = "1" bgcolor = " # aa8899"> 
«tr» «td» 学 号 </td>< td> 姓 名 </td>< td> 联 系 电话 </td> 
«/tr» 
<% 
for (int 1 = 0; i< stu. length; i++) ( 
$> 
<tr> 
<td><% = stu[ i].getXh() % ></td> 
<td><% = stu[i].getName() % ></td> 
<td><% = stu[i].getTeleno() $»«/td» 
</tr> 
<% 
} 
%> 
</table> 
从 List 中 取出 数据 放 人 表格 中 
< table border = "1" bgcolor = " # ddaa99"> 
<tr><td> 学 号 </td>< td> 姓 名 </td>< td> 联 系 电话 </td></tr> 
<% 
for (int і = 0; i< lstu. size(); i++) ( 
%> 
<tr> 
<td><% = ((Student) 1stu.get(i)).getXh() ®></+а> 
<td><% = ((Student) 1stu.get(i)).getName() %></td> 
<td><% = ((Student) 1stu.get(i)).getTeleno() %></td> 
</tr> 
<% 
} 
%> 
</table> 
从 List 中 取出 数据 放 人 表格 中 
<br> 【学 号 带 超 链接 】 
< table border = "1" bgcolor = " # aaff77"> 
<tr>< td> 学 号 </td>< td> 姓 名 </td>< td> 联 系 电话 </td></tr> 
<% 
for (int i = 0; i< lstu. size(); i++) { 
%> 
«tr» 
«td» 
<a href = detail. jsp?xh = <% = ( (Student) lstu.get(i)).getXh() $2» 
<% = ((Student) 1stu.get(i)).getXh() $> </a> 
</td> 
<td><% = ((Student) 1stu.get(i)).getName() %></td> 


<td><% = ((Student) lstu. get(i)).getTeleno() %></td> 

</tr> 

<% 
) 

> 

</table> 
</body> 
</html> 


detail. jsp 参考 代码 如 下 : 


< * @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<html> 


<head> 
<title> detail. jsp</title> 
</head> 
<body> 
<% // 对 于 中 文 参 数 , 要 重新 解码 编码 
String xh = request. getParameter("xh"); // 获 得 请 求 参 数 
//byte[ ] bytes = xh. getBytes(" ISO- 8859-1"); // 用 ISO- 8859 - 1 分 解 成 字 节 数组 
//xh = new String(bytes, "utf - 8"); // 将 字 节 数组 重新 解码 成 字符 串 
%> 


学 号 为 < font size = 4 color = "гей"><% = xh%></font > 同学 的 详细 信息 如 下 <br> 
< ing src = ../img/< % = xh $». jpg» 
</body> 
</html > 


(3) 在 地 址 栏 输入 URL, 观 察 浏览 器 显示 效果 ,如 图 4-6 所 示 。 


[Tz B080/jspsz/chOa/table, jsp T ыш 


SO |@-[ http Localhost 8080/yspsa/ehO4/tabla. jsp 


从 数组 中 取出 数据 放 入 表格 中 


从 List 中 取出 数据 放 入 表格 中 


从 List 中 取出 数据 放 入 表格 中 
【学 号 带 超 链 接 】 


图 4-6 动态 表格 运行 效果 
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(4) 编写 下 列 程序 ,该 程序 从 Map 集合 类 容器 获取 数据 , 填 人 表格 中 ,观察 运行 效果 。 
tablemap. jsp 参考 代码 如 下 : 


< % (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<% (à page import = "bean. Student" % > 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
<html> 
<head> 
<title>JSP 表格 数据 来 自 于 集合 容器 MAP 实验 </title> 
</head> 
<body> 
<% //{Е Map 集合 中 放 入 3 个 对 象 ,在 从 集合 容器 中 取出 数据 放 入 表格 输出 
Map mstu = new HashMap() ; 
mstu.put("A011", new Student("001"," 奥 小 马 ", "13844488101")); 
mstu. put("A012", new Student("002" , " 普 小 京 ", "13848888108")); 
mstu. put("A013", new Student("003", " 平 通 生 ", "18844488158")); 
$> 
<hr> 从 Map 中 获取 数据 <br> 
«table border= "1" bgcolor = " # aaff88"> 
<tr><th> 学 号 </th><th> 姓 名 </th></tr> 


<% 
Set xhSet = mstu.keySet(); // 获 得 学 号 的 Set 集合 
Object[ ] xh A = xhSet.toarray(); // 将 学 号 的 Set 集合 转 为 xh_A 数组 , 以便 根据 Key 


// 获 取 value 
Student ss = new Student(); 
for (int i = 0; і < xh A. length; i++) ( 
// 根 据 从 学 号 数组 中 取出 的 学 号 键 值 到 Map 中 找 出 Student 对 象 
Ss = (Student)mstu. get((String)xh A[i]); 
%> 
«tr»«td»«5 = ss.getXh() %></td><td><% = ss.getName() $»«/td»«/tr» 
<%) %> 
</table> 
</body> 
</html> 


程序 运行 效果 如 图 4-7 所 示 。 


JS? 表 格 数据 来 自 于 集合 容器 HAz 实 验 = find zinixi 


[st] http: //1оса1һ‹ 


图 4-7 表格 数据 来 自 Map 容器 


(5) 拓展 实验 : 
将 班级 部 分 同学 存 人 数组 和 集合 类 容器 ,再 以 表格 形式 输出 数组 和 集合 类 中 的 同学 
信息 


o 


实验 4.4 JSP 动作 标记 


—jsp:include page=" X PFH URL"/ 盖 动作 标记 是 在 JSP 页 面 运行 时 才 处 理 加 载 的 文 
件 ,被 加 载 的 文件 在 逻辑 和 语法 上 独立 于 当前 JSP 页 面 。include 动作 标记 可 以 使 用 param 
子 标记 向 被 加 载 的 JSP 文件 传递 信息 。 

—jsp:forward page 一 "页 面 URL" /请 动作 标记 的 作用 是 : 从 该 指令 处 停止 当前 页 面 
的 继续 执行 ,而 转向 执行 page 属性 指定 的 JSP 页 面 。forward 标记 可 以 使 用 param 动作 标 
记 作 为 子 标 记 , 以 便 向 要 转向 的 JSP 页 面 传送 信息 。 


【实验 任务 】 


编写 4 个 JSP 页 面 : one. jsp. two. jsp, three. jsp 和 error. jsp. one. jsp, two. jsp 和 
three. jsp 页 面 都 含有 一 个 导航 条 ,以 便 让 用 户 方便 地 单 击 超 链接 访问 这 3 个 页 面 ,要 求 这 3 
个 页 面 通过 使 用 include 动作 标记 动态 加 载 导 航 条 文件 head. txt。 

本 实验 的 目的 是 ,让 学 生 掌 握 在 JSP 页 面 中 使 用 include 标记 动态 加 载 文 件 ; 使 用 
forward 实现 页 面 的 转向 。 


【实验 步骤】 
(1) 在 WebRoot\eh04 下 编写 导航 条 文件 head. txt, 内 容 如 下 : 


<% @ page contentType = "text/htnl;charset = GB2312" %> 
«table cellSpacing= "1" cellPadding = "1" width= "60 %" align = "center" border = "0" > 
<tr valign = "bottom"> 
<td><a href = "one. jsp">< font size = 3> one. jsp 页面 </font></a></td> 
<td><a href = "two. jsp">< font size = 3» two. jsp 页 面 </font ></a></td> 
<td><a href = "three. jsp">< font size = 3 > three. jsp 页 面 </font></a></td> 
</tr> 
</Font > 
</table> 
(2) 编写 JSP 页 面 文件 one. jsp.two. jsp, three. jsp 和 error. jsp. 
one. jsp 页 面 有 一 个 表单 ,用 户 使 用 该 表单 可 以 输入 一 个 1 一 100 之 间 的 整数 ,并 提交 给 
页 面 ; 如 果 输 入 的 整数 在 50 一 100 之 间 ( 不 包括 50) 就 转向 three. jsp, 如 果 在 1 一 50 之 间 就 
转向 two. jsp; 如 果 输 入 不 符合 要 求 就 转向 error. jsp。 要 求 forward 标记 在 实现 页 面 转向 
时 ,使 用 param 子 标记 将 整数 传递 到 转向 的 two. jsp 或 three. jsp 页 面 , 将 有 关 输 入 错误 传 
递 到 转向 的 error. jsp 页 面 
two. jsp 和 three. jsp 能 输出 one. jsp 传递 过 来 的 值 ,并 显示 一 幅 图 片 , 该 图 片 的 宽 和 高 
刚好 是 one. jsp 页 面 传递 过 来 的 值 。error 页 面 能 显示 有 关 错 误 信息 和 一 幅 图 片 。 
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(D one. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = GB2312" %> 
<html> 
<head> 
< jsp: include page = "head. txt" /> 
</head> 
< body bgcolor = yellow > 
< form action = "" method = get name = form > 
请 输入 1 一 100 之 间 的 整数 < br > 
1 一 50 # two. jsp.51—100 # two. jsp, «br» 
并 且 显 示 图 片 ,图 片 大 小 与 输入 的 数值 一 致 。<br> 
(输入 非 数 字 则 转 error. jsp): <p> 
< input type = "text" name = "number">< p> 
< input TYPE = "submit" value = "送出 " папе = submit > 
</form> 
<% 
String num = request.getParameter("number"); 


if (num == null) { 
num = "0"; 
) 
try ( 
int п = Integer. parseInt(num); 
if (n>= 18&n«- 50) ( 
%> 
< јѕр: forward page = "two. jsp"> 
< jsp:param папе = "number" value = "<% = n $>" /> 
«/jsp:forward» 
<% 
) else if (п> 50 && n <= 100) ( 
%> 
< jsp: forward раде = "three. јѕр"> 
< jsp:param папе = "number" value = "<% = п% >" /> 
«/jsp:forward» 
<% 
) 
) catch (Exception e) ( 
$> 
< jsp:forward page = "error. jsp"> 
< jsp:param name = "mess" value = "< % = e.toString() $»" /> 
</jsp:forward> 
<% 


$> 
«/ body » 
</html> 


© two. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = utf - 8" %> 
<html> 


<head> 
< jsp: include page = "head. txt" /> 
</head> 
< body bgcolor = yellow >< P» 
< font size = 3 color = blue > 这 是 two. jsp 页 面 </font > 
< font size = 3» 
<% String s = request.getParameter("number"); 
out.println("« br > 传递 过 来 的 值 是 " + s);  &»«/font»«br» 


< img src = "../img/bdlg. jpg" width= "<% =s%>" height = "<% =s%>"></img> 


<p><a href = "one. jsp"> 返 回 one 页 面 </a> 
</body> 
«/htnl > 


( three. jsp 参考 代码 如 下 : 


<% (à page contentType = "text/html;charset = utf – 8" %> 
<html> 
<head> 
< jsp: include page = "head. txt" /> 
</head> 
< body bgcolor = yellow>< p> 
< font size = 3 color = red> 这 是 three. jsp 页 面 </font > 
< font size = 3> 
<% 
Strings = request.getParameter("number"); 
out. println("< br > 传递 过 来 的 值 是 " + s); %></font> <br> 
< img src = "../img/ayst. jpg" width="<% = s %>" height = "<% = s%>"></img> 
<p><a href = "one. jsp"> 返 回 one 页 面 </a> 
</body> 
</html > 


(D error. jsp 参考 代码 如 下 : 


<% (à page contentType = "text/html;charset = utf - 8" %> 
<html> 
<head> 
< jsp: include page = "head. txt" /> 
</head> 
< body bgcolor = yellow > 
<p><font size = 4 color = red> 这 是 error. jsp 页 面 </font> 
«font size=2> 
<% 
String s = request. getParameter("mess"); 
out. println("« br> 输 入 的 不 是 数值 哦 !< br > 数据 格式 异常 信息 : "+ s); 
%></font > 
<br>< img src = "../img/error. jpg" width= "120" height = "120"></img> 
<p><a href = "one. jsp"> 返 回 one 页 面 </a> 
</body> 
</html > 
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(3) 运行 程序 ,观察 效果 ,如 图 4-8 所 示 。 


one. jsp 页 面 two. jsp 页 面 three. jsp 页 面 ETE TE IT F 
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1780 m jsp. 517100 转 two. jsp. 这 是 twojsp 页 面 
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图 4-8 JSP 动作 标记 运行 效果 


实验 4.5 request 对 象 


如 果 要 与 用 户 互动 ,需要 知道 用 户 的 需求 ,然后 根据 这 个 需求 生成 用 户 期 望 看 到 的 结 
AR ,这样 才 能 实现 与 用 户 的 互动 。 在 Web 应 用 中 ,用 户 的 需求 就 抽象 成 一 个 request 对 象 。 
request 为 JSP 中 最 常用 的 对 象 之 一 ,用 于 封装 客户 端的 请 求 信息 ,通过 调用 相应 的 方法 可 
以 获取 客户 端 提 交 的 信息 。 从 request 对 象 可 以 取出 客户 端 用 户 提交 的 数据 或 参数 ,这 个 
对 象 只 有 接受 用 户 请 求 的 页 面 才能 访问 。 

request 对 象 中 也 包括 一 些 服务 器 的 信息 ,如 端口 .真实 路 径 、 访 问 协议 等 。 通 过 
request 对 象 可 以 取得 服务 器 的 参数 。 


【实验 任务 】 
编写 JSP 程序 ,显示 从 request 对 象 获取 客户 端 提交 的 数据 或 参数 。 
[x45] 


CD 编写 程序 。 
reqtest. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java. util. * " contentType = "text/html; charset = 
gb2312" % > 
<html> 

< head> 


<title> request 主要 方法 调用 示例 </title> 
</head> 
< body> 
< font size = "2"> 
request 主要 方法 调用 示例 : <br> 
<% 
request. setAttribute("attr","Hello!"); 
out. println("attr 属性 的 值 为 : " + request. getAttribute("attr") +"<br>"); 
out. println(" 上 下 文 路 径 为 : " + request. getContextPath() + "< br>"); 
out. println("Cookies:" + request. getCookies() +"<br>"); 
out. println("Host:" + request. getHeader("Host") + "« br»"); 
out. println("ServerName:" + request. getServerName() + "< br>"); 
out. println("ServerPort:" + request. getServerPort() + "< br»"); 
out. println("RemoteAddr:" + request. getRemoteAddr() + "< br >"); 
request. removeAttribute("attr"); 
out. println(" 属 性 移 除 操作 以 后 attr 属性 的 值 为 : " + request. getAttribute ("attr") + 
"<br>"); 
out.println(" WEB 项 目的 物理 路 径 : " + this. getServletContext (). getRealPath ( "") + 
"<br>"); 
第 > 
</font > 
</body> 
</html > 


(2) 在 地 址 栏 输入 URL ,观察 浏览 器 显示 效果 ,如 图 4-9 所 示 。 


request 主 要 方法 调用 示例 - Yindows Internet Explorer 


SO- ©- Е J/1ocalhost:8080/jspsx/ chD4/reqtest. jsp. zl 
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request 主 要 方法 调用 示例 : 
attr 属 性 的 值 为 : Hello! 
上 下 文 路 径 为 : /jspsx 


Cookies:null 


Host:localhost:8080 

ServerName:localhost 

ServerPort:8080 

RemoteAddr:127.0.0.1 

属性 移 除 操作 以 后 attr 属 性 的 值 为 : null 
WEB 服 务 器 的 物理 路 径 : D:\Tomcat7.0\webapps\jspsx 


图 4-9 从 request 对 象 获得 的 参数 


(3) 编写 用 户 表 单 JSP 程序 ,显示 用 户 表 单 参数 传递 结果 。 

在 表单 中 ,method 取 值 post 或 get, 其 主要 区 别 体 现在 数据 发 送 方式 和 接收 方式 上 : 
get 方式 在 通过 URL 提交 数据 时 ,提交 信息 会 显示 在 地 址 栏 中 。 一 般 说 来 ,应 尽量 避免 使 
用 get 方式 提交 表单 ,因为 这 样 有 可 能 会 导致 安全 问题 。 例 如 ,在 登录 表单 中 用 get 方式 ， 第 
用 户 输入 的 用 户 名 和 密码 将 在 地 址 栏 中 暴露 无 遗 。 4 

在 开发 Web 程序 时 ,一定 会 接触 到 表单 信息 的 提交 以 及 接收 ,因此 不 可 避免 地 会 使 用 | = 
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request 对 象 以 及 使 用 post 提交 表单 。 


O reqform. jsp 参考 代码 如 下 : 


<% @ page language = "java" pageEncoding = "utf- 8" %> 


<html> 
<body> 


< form action = "req_recv. jsp" method = "post"> 


< table border = "1"> 


<tr><td> 用 户 名 : </td> <td>< input type = "text" name 
<tr><td> 密 码 : </td> < td>< input type = "password" name 


< tr >< td colspan= 2 > 


"name"></td> «/tr» 
"password"></td> </tr > 


< input type = "checkbox" name = "like" value = "Ж" /> 骑 自行 车 


< input type = "checkbox" name = "like" value 


«tr align = center >< td colspan- 2 > 
< input type = "submit" value 


"提交 "> 


驾车 " /> 驾驶 小 汽车 </td></tr> 


< input type = "reset" value = "取消 "></td></tr> 


</table> 
</form> 
</body> 
</html> 


@ гед гесу. jsp 参考 代码 如 下 : 


<% @ page language = "java" pageEncoding = "utf - 8" contentType = "text/html; charset = utf — 


8" $> 


<% @ page import = "java. util. Enumeration" %> 


<html> 
<head> 
«title» request 对 象 测试 </title> 
</head> 
<body> 
<% 


request. setCharacterEncoding("utf - 8"); 


String parameterName = nu11; 
String[ ] parameterValue = nu11; 
$> 
<p> 
使 用 request. getParameter (" name" ) 取 得 的 值 : 


<%  out.println(request. getParameter("name" ) ) ; 


%> 


<p> 使 用 request. getParameterNames( ) 取 得 表单 所 有 参数 的 值 :<br> 


<% Enumeration en = request.getParameterNames(); 


int j= 0; 
while(en. hasMoreElements()){ 


parameterName = (String) en.nextElement(); 


parameterValue = request.getParameterValues(parameterName); 


out. println(" 表 单 参数 名 称 :" + parameterName +" 


%> 
<% 


for(int і = 0; 1 < parameterValue. length; i++ ){ 


<% = parameterValue[ i] %> 


$> 


"); 


// 逐 个 输出 该 表单 参数 的 值 


<% ) %> «br» 
<%}%> 
</body> 
</html> 


(4) 运行 用 户 表单 参数 传递 程序 ,效果 如 图 4-10 所 示 。 
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| 使 用 requestgetParameter("name") 取 得 的 值 : 小 明 
密码 : eseese | 使 用 request.getParameterNames() 取 得 表单 所 有 参数 的 值 : 
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实验 4.6 session 对 象 使 用 


在 Web 中 ,Session 有 两 个 含义 ,一 是 代表 一 种 生命 周期 ,一 般 是 指 用 户 在 浏览 某 个 网 
站 时 ,从 进入 网 站 到 浏览 器 关闭 所 经 过 的 这 段 时 间 , 也 就 是 用 户 浏览 这 个 网 站 所 花费 的 时 
间 ; 二 是 容器 性 的 内 置 对 象 ,由 服务 器 自动 为 用 户 创建 ,为 用 户 独 享 ,常用 来 存放 session 生 
命 周期 中 的 有 关 信 息 。 


【实验 任务 】 


模拟 一 个 简单 的 用 户 登 录 动 作 , 在 这 个 实验 程序 中 不 对 提交 的 登录 信息 做 具体 的 验证 ， 
只 要 用 户 名 和 密码 都 不 为 空 就 可 以 登录 。 登 录 时 ,将 用 户 信息 保存 在 session 对 象 中 ,这 样 
处 理 只 是 为 了 方便 说 明 session 的 使 用 方法 ,在 具体 的 开发 中 必须 要 对 登录 信息 进行 数据 库 
验证 。 


【实验 步骤 】 


COD 编写 3 个 JSP 程序 login. jsp.loginCheck. jsp, main. jsp ,程序 功能 分 别 是 进行 用 户 
登录 ,登录 信息 处 理 和 登录 后 的 工作 页 面 中 获取 保存 在 session 中 的 用 户 信息 。 
(D login. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java. util. * " contentType = "text/html; charset = utf 一 
8"&» 
<html> 
<head> 
<title> 用 户 登 录 界 面 </title> 
</head> 
< body> 
< font size = "2"> 
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< forn action = "loginCheck. jsp" method = "post"> 
用 户 名 : «input type = "text" name = "userName" size- "10"/» «br» 
Æ 8j: < input type = "password" папе = "passWord" size- "10"/»« br»«/font» 
< font size = "1" color = "green">( 提 交 后 ,用 户 名 将 被 存 人 session 中 )</font >< br» 
< input type = "submit" value = "提交 "> 
</form> 
</body> 
</html > 


上 面 这 个 JSP 页 面向 loginCheck. jsp 提交 了 一 个 登录 表单 ,表单 中 有 用 户 名 和 密码 。 
© loginCheck. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java. util. * " contentType = "text/html; charset = utf — 
8"%> 
<html> 
<head> 
<title > 用 户 登录 验证 页 面 </title> 
</head> 
<% 
request. setCharacterEncoding( "utf – 8"); 
String userName = request.getParameter("userName"); 
String passWord = request.getParameter("passWord"); 
if(userName. length( )> 0&&passWord. length()> 0) 
{ 
session. setAttribute("uname", userName) ; 
response. sendRedirect("main. jsp"); 
}else 
response. sendRedirect("login. jsp"); 
$> 
< body> 
</body> 
</html> 


在 loginCheck. jsp 中 ,从 request 对 象 中 取出 用 户 名 和 密码 ,如 果 用 户 名 和 密码 都 不 为 
空 就 允许 登录 ,否则 就 重 定 向 到 登录 页 面 ,让 用 户 重 新 登录 。 如 果 用 户 登 录 成 功 ,就 将 用 户 
A TÉ session 中 ,然后 重 定 向 到 系统 的 主页 面 main. jsp, 在 主页 面 中 获取 session 中 的 用 户 
名 。 在 实际 应 用 中 ,用 户 浏 览 站 点 时 的 当前 用 户 提 示 信 息 就 是 这 么 做 的 。 

@ main. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java. util. * " contentType = "text/html; charset = utf 一 
8"%> 
<html> 
<head> 
< title > 系统 主 界面 </title> 
</head> 
< body> 
< font size = "2"> 
<% 
String uname = (String)session.getAttribute("uname"); 
if(uname!= null) 


out.print(" 登 录 成 功 ! 欢 迎 " + uname + "浏览 站 点 !"); 
else 
response. sendRedirect("login. jsp"); 
%><br> 
< font size = "1" color = "green"> 上 述 名 字 <% = uname %® > 是 从 session 中 取出 的 </font> 
</font> 
</body> 
</html> 


在 上 面 main. jsp 页 面 中 ,对 用 户 的 状态 进行 判断 ,如 果 从 session 中 可 以 取出 对 应 的 属 
性 值 , 说 明 用 户 已 经 登录 ,如 果 没 有 取得 指定 属性 值 , 说 明 用 户 没 有 登录 ,这 时 就 重 定 向 到 登 
录 页 面 ,让 用 户 重新 登录 。 其 中 ,session 的 值 在 用 户 离开 系统 之 前 的 任何 页 面 都 可 以 访问 。 

(2) 在 地 址 栏 输入 URL, 观 察 浏览 器 显示 效果 ,体会 session 的 作用 和 用 法 ,如 图 4-11 
所 示 。 


/全 用户 登录 界面 - Yindows Internet Explorer Mi=] 
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(提交 后 ， 用 户 名 将 被 存 和 session 中 ) 登录 成 功 ! 欢迎 严 小 峻 浏览 站 点 ! 
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4-11 session 对 象 应 用 


实验 4.7 application 对 象 实现 访问 统计 


application 对 象 保存 着 整个 Web 应 用 运行 期 间 的 全 局 数据 和 信息 ,从 Web 应 用 开始 
运行 ,这 个 对 象 就 会 被 创建 ,在 整个 Web 应 用 运行 期 间 可 以 在 任何 JSP 页 面 中 访问 这 个 对 
象 。 如 果 要 保存 在 整个 Web 应 用 运行 期 间 都 可 以 访问 的 数据 ,就 要 用 到 application 对 象 。 


【实验 任务 】 
编写 JSP 程序 ,利用 application 对 象 实现 网 站 访问 计数 。 


【实验 步骤 】 


(1) 编写 visitcount. jsp 程序 。 
visitcount. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = " java. util. * " contentType = "text/html; charset = 
gb2312" % > 
<html> 
< head> 
<title> 利 用 application 对 象 实现 的 计数 器 示例 </title> 
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</head> 
< body> 
< font size = "2"> 
<% 
int count = 0; 
if(application.getAttribute("count") == null) 
{ 
count = count +1; 
application. setAttribute("count", count); 
}else 
{ 
count = Integer.parseInt(application.getAttribute("count").toString()); 
count = count + 1; 
application. setAttribute("count",count); 


} 


out. println(" 您 是 本 系统 的 第 " + count + "访问 者 !"); 
第 > 
</font > 
</body> 
«/htnl» 


(2) 运行 程序 ,使 用 application 对 象 统计 站 点 访问 量 效 果 如 图 4-12 所 示 o 
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4-12 使 用 application 对 象 统计 站 点 访问 量 


在 上 面 这 个 程序 中 , 当 第 一 次 访问 时 把 count 的 初始 值 设置 为 1, 以 后 每 次 刷新 的 时 候 
累加 count 的 值 。 上 面 这 个 计数 器 的 运行 过 程 中 ,多 个 页 面 之 间 共 享 计数 器 的 值 , 而 且 关 闭 
浏览 器 后 在 新 开 窗 口 时 ,以 前 计数 器 的 值 还 保留 ,这 就 是 application 和 session 最 大 的 
区 别 。 


实验 4.8 JSP 中 文 乱码 解决 方案 


【实验 任务 】 


编写 JSP 程序 ,解决 JSP 中 文 乱码 问题 ,主要 解决 URL 传递 参数 乱码 和 表单 参数 中 文 
乱码 。 


【实验 和 步骤 】 
СТ) 解决 URL 传递 参数 中 文 乱码 问题 。 编 写 messyl. jsp 程序 。 该 程序 说 明了 在 使 用 


get 方法 提交 表单 时 传递 的 参数 出 现 中 文 乱 码 时 的 解决 办 法 。 
messyl.jsp 参考 代码 如 下 : 


<% @ page language = " java" import = " java. util. * " contentType = " text/html; charset = 
gb2312" % > 
<html> 
< head> 
« title» URL 传递 参数 中 文 处 理 示例 </title> 
</head> 
<% 
String param = request.getParameter("param"); 
%> 
<body> 
<a href = " messy1. jsp?param = ' 中 文 '"> 请 单 击 这 个 链接 </a>< br> 
你 提交 的 参数 为 : <% = parans 
</body> 
</html > 


表单 传递 参数 中 文 乱码 如 图 4-13 Bras. 


VRL 传 递 参数 中 文 处 理 示例 - Yindows Internet Ez | E3] 
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请 点 击 这 个 链接 
你 提交 的 参数 为 : аа) 0 ' 
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图 4-13 表单 传递 参数 中 文 乱码 


上 面 这 个 JSP 程序 的 功能 就 是 通过 一 个 URL 链接 向 自身 传递 一 个 参数 ,这 个 参数 是 
中 文字 符 串 。 
解决 办 法 1: 将 获取 的 参数 二 次 编码 , 先 将 获得 的 表单 参数 按 ISO8859 一 1 编码 转换 为 
字 节 数组 ,再 将 字 节 数组 按 UTF-8 编码 重新 生成 字符 串 , 即 将 语句 “String param 一 
request. getParameter( " param") ;" it H “String param = new String ( request. getParameter 
C" param")). getBytesC"is08859-1") ,"utf-8") ; "рау, 
解决 办 法 2: 修改 Tomcat 服务 器 的 配置 文件 。 修 改 Tomcat 的 conf 目录 下 的 server. 
xml 文件 ,具体 改 后 的 代码 : 
< Connector port = "8080" protocol = "HTTP/1. 1" URIEncoding = "gb2312" 
connectionTimeout = "20000" 
redirectPort = "8443" /> 
也 就 是 在 原来 代码 中 添加 URI 编码 设置 URIEncoding— "gb2312" ,重启 Tomcat 服务 器 就 
可 以 得 到 正确 的 页 面 。 
(2) 解决 表单 提交 中 文 乱 码 问 题 。 编 写 程序 messy2. jsp ,对 于 表单 提交 的 参数 ,可 以 使 
用 request. getParameter( "参数 名 ") 的 方法 获取 ,但 是 当 表单 中 出 现 中 文 数据 的 时 候 就 会 出 
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现 乱码 。 
messy2. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java. util. * " contentType = "text/html; charset = utf 一 
8"&» 
<html> 
<head> 
«title» Form 中 文 处 理 示例 </title> 
</head> 
<body> 
<% //request. setCharacterEncoding("utf -8"); %> 
< font size = "2"> 
下 面 是 表单 提交 的 内 容 : 
< form action = "messy2. jsp" method = "post"> 
用 户 名 : < input type = "text" name = "userName" size = "10" /> 
Ж 码 : < input type = "password" name = "password" size = "10" /> 
< input type = "submit" value = "提交 "> 
</form> 
</font><hr> 
< font size = "2"> 下 面 是 表单 提交 以 后 用 request 取 到 的 表单 数据 : <br> 
<% 
String userName = request.getParameter("userName"); 
String password = request.getParameter("password"); 
if(null!- userName)( 
out.println(" 表 单 输入 userName 的 值 = ”+ userName + "«br»"); 
out.println(" 表 单 输入 password 的 值 = ”+ password + "<br>"); 
} 
else{out. println(" 表 单 参数 尚未 提交 !");} 
%> 
</font > 
</body> 
</html> 


在 上 面 的 程序 中 ,表单 向 本 页 面 提交 了 两 项 数据 。 当 表单 输入 的 数据 中 有 中 文 时 ,得 到 
的 结果 将 会 出 现 中 文 乱码 ,如 图 4-14 所 示 。 
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下 面 是 表单 提交 的 内 容 ， 下 面 是 表单 提交 的 内 容 ， 
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4-14 表单 输入 中 文 乱码 


解决 办 法 : 在 body 域 前 部 增加 语句 二 % request. setCharacterEncoding("utf-8"); % >, Вр 
指定 按 UTF-8 编码 方式 从 request 对 象 中 获取 参数 。 


第 5 = JSP 访问 数据 库 


本 章 实验 中 所 用 的 数据 库 名 称 为 student, 其 中 的 表 名 为 stuinfo。 在 进行 实验 之 前 先 
完成 数据 库 和 表 的 创建 。 

创建 数据 库 步 骤 如 下 : 

(1) 使 用 Navicat for MySQL 创建 一 个 MySQL 数据 库 student, 注 意 ,数据 库 字 符 集 选 
UTF-8, 

(2) 在 数据 库 student 中 创建 stuinfo & ,或 直接 从 Excel 导入 学 生 名 单 表 , 命 名 表 名 为 
stuinfo。 表 结构 如 图 5-1 所 示 。 


图 5-1 stuinfo 表 结构 示意 图 
(3) 从 Excel 导入 学 生 名 单 生 成 stuinfo 表 的 操作 如 图 5-2 所 示 。 


Cm [E] stuinfo Astudent (wew) 
> me 
LI [name | 


1870001100 
1870001101 
1870001102 
1870001103 
1870001104 
1870001105 
1870001106 
1870001107 


1870001108 
1870001109 


a ld | 


图 5-2 直接 从 Excel 导入 学 生 名 单 
【实验 目的 】 
本 章 实验 目的 是 ,理解 JDBC 的 工作 原理 ,掌握 使 用 JDBC 连接 数据 库 的 基本 步骤 。 


实验 5.1 查询 记录 


【实验 内 容 】 
编写 JSP 程序 ,使 用 JDBC 访问 数据 库 , 查 询 数据 库 中 表 的 记录 。 实 验 目的 是 让 学 生 党 
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握 使 用 JDBC 查询 数据 库 中 表 的 记录 。 
将 访问 MySQL 数据 库 的 JDBC 驱动 JAR 包 复 制 到 WebRoot WEB-INF->~ lib 中 。 
JSP 文件 中 使 用 JDBC 访问 数据 库 的 编程 要 点 : 
(1) 添加 page 指令 : 


<% @ page import = "java. sql. *" %> 

(2) 加 载 MySql 驱动 : 

Class. forName( "com. mysq1. jdbc. Driver"); 

(3) 创建 连接 对 象 : 

String conStr = " jdbc: mysql://localhost: 3306/student? useUnicode = true&characterEncoding = 


utf- 8"; 
Connection con = DriverManager. getConnection(conStr, "root","123"); 


(4) @J#Ë Statement 语句 对 象 : 
Statement stmt = con. createStatement(); 
(5) 向 数据 库 发 送 关 于 查询 记录 的 SQL 语句 ,返回 查询 结果 , 即 ResultSet 对 象 : 


ResultSet rs= stmt. executeQuery( # ifi stuinfo 表 的 SQL 语句 ); 


【实验 步骤 】 


CD 编写 4 个 JSP 页 面 : searchStu. jsp. byNumber. jsp,byName. jsp.allStu. jsp 页 面 。 

searchStu. jsp 的 具体 要 求 : searchStu. jsp 提供 两 个 表单 。 其 中 一 个 表单 允许 用 户 输 
入 要 查询 的 学 生 的 学 号 , 即 输 入 stuinfo 表 中 xh 字段 的 查询 条 件 ,然后 将 查询 条 件 提交 给 要 
byXh. jsp, 另 一 个 表单 允许 用 户 输入 要 查询 的 学 生 的 姓名 , 即 输入 stuinfo 表 中 name 字段 
的 查询 条 件 , 然 后 将 查询 条 件 提交 给 要 byName. jsp. 

byXh. jsp 的 具体 要 求 : byXh. jsp 首先 获得 searchStu. jsp 提交 的 关于 xh 字段 的 查询 
ATE ,然后 使 用 JDBC 查询 。 

byName. jsp 的 具体 要 求 : byName. jsp 首先 获得 searchStu. jsp 提交 的 关于 name 字段 
的 查询 条 件 ,然后 使 用 JDBC 查询 。 

(D searchStu. jsp 参考 代码 如 下 : 

<% @ page language = "java" import = "java.util. * " pageEncoding = "UTF- 8" % > 

<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 

<html> 

<head> 

<title > 查询 学 生 信息 </title> 
</head> 
<body bgcolor = " # 99DD99"> 
< FORM action = "byXh. jsp" Method = "post"> 
根据 学 号 查询 < BR > 
输入 学 号 :< Input type = text name = "xh"> 
< Input type = submit value = "提交 "> 


</Form> 
< FORM action = "byName. jsp" Method = "post"> 
根据 姓名 (可 模糊 ) 查 询 < BR> 
姓名 含有 : < Input type = text name = "name" size= 5> 
< Input type = submit value = "提交 "> 
</Form> 
<a href = "allStu. jsp" > 显示 全 部 学 生 信息 </a> 
</body> 
</html> 


© byXh. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<% @ page import = "java. sql. * " $> 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
<html> 
< head> 
<title > 根据 学 号 查询 学 生 信 息 </title> 
</head> 
< body bgcolor = cyan> 
<% String number = request.getParameter("xh"); 
Class. forName("con. mysql. jdbc. Driver"); 
Connection con = DriverManager. getConnection ( " jdbc: mysql: //1ocalhost: 3306/student? 
useUnicode = 
true&characterEncoding = СВК", "root" , "123") ; 
Statement stmt - con.createStatement(ResultSet. TYPE SCROLL INSENSITIVE, 
ResultSet.CONCUR READ ONLY); 
String seleStr = "SELECT * FROM stuinfo Where xh = '" + number + "'"; 
ResultSet rs = stmt. executeQuery(seleStr); 
if(!rs. next()){out.print(" 没 有 找到 学 号 为 " + number + "的 同学 !");} 
else 
{ 
名 > 根据 学 号 <% = number % > 查询 到 的 学 生 信息 : 
<table bgcolor=yellow border=1> 
<tr bgcolor = " # 00FF99"> 
<td><% = rs.getString("xh") $»«/td» 
<td><% = rs.getString("name") %></td> 
<td><% = rs.getString("sex") %></td> 
<td><% = rs.getString("tele") %></td> 
</tr> 
</table> 
<br> 
<%} 
rs.close(); 
stmt.close(); 
%> 
</Font > 
</body> 
</html > 
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@ byName. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf 一 8" %> 
<% (à page import = "java. sql. * " %> 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
<html> 
< head> 
<title> 根 据 姓名 查询 学 生 信 息 </title> 
</head> 
< body bgcolor = cyan > 
<% 
request. setCharacterEncoding("utf - 8"); 
String name = request. getParameter("name") ; 
Class. forName("con. mysql. jdbc. Driver"); 
Connection con = DriverManager. getConnection(" jdbc :mysq] : //localhost:3306/student? 
useUnicode = true&characterEncoding = СВК", " root" , " 123") ; 
Statement stmt = con.createStatement(ResultSet. TYPE SCROLL INSENSITIVE, 
ResultSet.CONCUR READ ONLY); 
String seleStr = "SELECT * FROM stuinfo Where name Like '% " + папе + " % '"; 
ResultSet rs = stmt. executeQuery(seleStr); 
if(!rs.next()) (out. print(" 没 有 找到 姓名 为 " + name + "的 同学 !");} 
else 
{ 
> 根据 姓名 <% = name % > 查询 到 的 学 生 信息 : 
<table bgcolor=yellow border=1> 
< tr bgcolor = " # DD8899"> 
<td><% = rs.getString("xh") %></td> 
<td><% = rs.getString("name") %></td> 
<td><% = rs.getString("sex") %></td> 
<td><% = rs.getString("tele") $»«/td» 
</tr> 
</table> 
<br> 
<%) 
rs.close(); 
stmt.close(); 
第 > 
</Font > 
</body> 
</html> 


Ф allStu. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<% @ page import = "java. sql. * " $> 

<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 

<html> 

<head> 


<title > 根据 查询 全 部 学 生 信息 </title> 
</head> 
<body bgcolor = cyan> 
<% String number = request.getParameter("xh"); 
Class. forName( "com. mysql. jdbc. Driver"); 
Connection con = DriverManager. getConnection(" jdbc :mysq1 : //1ocalhost:3306/student? 
useUnicode = true&characterEncoding = СВК", " root" , " 123") ; 
Statement stmt - con.createStatement(); 
String seleStr - "SELECT * FROM stuinfo"; 
ResultSet rs = stmt. executeQuery(seleStr); 
$> 
查询 到 全 部 学 生 信息 : 
<table bgcolor= yellow border =1> 
<% while(rs.next()) 
{ $> 
<tr bgcolor = " # 22FF99"> 


<td><% = rs.getString("xh") $»«/td» 
<td><% = rs.getString("name") $»«/td» 
<td><% = rs.getString("sex") $»«/td» 
<td><% = rs.getString("tele") $»«/td» 
</tr> 
<%}%> 
</table> 
<br> 


<% rs.close(); 
stmt.close(); 
$> 
</Font > 
</body> 
</html> 


(2) 运行 程序 ,观察 效果 。 
searchStu. jsp 和 byXh. jsp 效果 如 图 5-3 所 示 。 
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5-3 根据 学 号 查询 记录 
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byName. jsp 和 allStu. jsp 效果 如 图 5-4 所 示 。 


AAEE E Lox] 人 à 
http://121. actice/ch5/allStu jsp "| 
8 |http: //12T. 0. 0. 1:8080/ jsppractice/ch5/byNane. jsp XPD S50 FEV KERA ТАФ > 


文件 到 REO SEV RERO IAW F 
TRER |55 p 建议 网 站 。 g) 网 页 快讯 库 > 
国 根据 查询 全 部 学 生 信息 


[Í de Internet [ea [Wu - ¿ET Mie TR = Z| 
图 5-4 指定 查询 或 显示 全 部 信息 


实验 5.2 添加 记录 


【实验 任务 】 


编写 JSP 程序 ,使 用 JDBC 访问 数据 库 , 更 新 数据 库 中 表 的 记录 。 本 实验 的 目的 是 让 学 
生 掌 握 使 用 JDBC 更 新 数据 库 中 表 的 记录 。 使 用 JDBC 更 新 数据 库 中 表 的 记录 的 SQL 请 
句 如 下 : 


int n = stmt. executeUpdate( 更 新 记录 的 SQL 语句 ); // 更 新 成 功 n 的 值 为 1, 否则 为 0 


【实验 步骤 】 


CD 编写 3 个 JSP 页 面 : showlnfo. jsp,insertInfo. jsp 和 inertExec. jsp 页 面 。 

showInfo. jsp 的 具体 要 求 : 从 数据 库 中 查 出 全 部 学 生 , 每 行 添加 “修改 ”和 “删除 ” 超 链 
接 。 表 格 末尾 添加 “新 增 学生 ” 的 超 链 接 。 

insertInfo. jsp 的 具体 要 求 : insertInfo. jsp 提供 一 个 表单 ,该 表单 允许 用 户 输入 欲 新 增 
学 生 的 学 号 ,姓名 ,性 别 、 电 话 等 信息 ,并 提交 到 inertExec. jsp 页 面 。 

inertExec. jsp 的 具体 要 求 : inertExec. jsp 首先 获得 insertInfo. jsp 页 面 提 交 的 关于 
xh、name、sex,tele 字段 ,然后 使 用 JDBC 更 新 记录 的 字段 值 。 

showInfo. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<% @ page import = "java. sql. * " $> 

<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN"» 

<html> 


< head> 


<title > 查询 全 部 学 生 信 息 </title> 
</head> 
< body bgcolor = cyan > 
<% 
//String number = request.getParameter("xh"); 
Class. forName("con. mysq1. jdbc. Driver"); 
Connection con = DriverManager. getConnection( 
" jdbc: mysql: //1localhost: 3306/student? useUnicode = 
GBk","root", "123"); 
Statement stmt = con.createStatement(); 
"SELECT * FROM stuinfo"; 
ResultSet rs = stmt.executeQuery(seleStr); 
%> 
查询 到 全 部 学 生 信息 : 
< table bgcolor = yellow border = 1 > 
<% 
String 151 = null, 152 = null; 
while (rs.next()) ( 


" 


String seleStr 


true&characterEncoding = 


151 = "< a href = updateInfo. jsp? pram_xh =" + rs. getString( "xh") +" target = _ 


blank > 修改 </a>"; 


1s2 = "< a href = deleteStu. jsp?pram_xh = " + rs. getString("xh") + "> 删除 </a>"; 


$> 

< tr bgcolor = " # 22FF99"> 
<td><% = rs.getString("xh") % ></td> 
«td»«5 = rs.getString("name") % ></td> 


<td><% = rs.getString("sex") %></td> 
«td»«5 = rs.getString("tele") $»«/td» 


<td><% -1sl %></td> 
<td><% = 1s2 %></td> 
</tr> 
<% } $> 
<tr> 


< td colspan = "6" align = "center" bgcolor = " # BB9988"> 
<a href = insertInfo. jsp> 添 加 记录 </a> 
</td> 
</tr> 
</table> 
<br> 
<% 
rs.close(); 
stmt.close(); 
$> 
</Font > 
</body> 
</html> 
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(2) 运行 showInfo. jsp 程序 ,效果 如 图 5-5 所 示 。 


127.0. 0. 1:8080/ jsppr sctice/ ch5/ shovInfo. jsp. 


5-5 showInfo. jsp 全 部 记录 列表 
添加 记录 的 JSP 表单 程序 insertInfo. jsp 参考 代码 如 下 : 


< * @ page language = "java" import = "java.util. * " pageEncoding = "utf 一 8"$> 
<% @ page import = "java. sql. *" %> 
<html> 
< head> 
<title> 添 加 记录 </title> 
</head> 
<body> 
< form action = "insertExec. jsp" method = "post"> 
<table bgcolor = red> 
<tr bgcolor = Yellow> 
<td align = "center" colspan = "2"> 请 在 下 表 中 填写 新 添加 的 学 生 信 息 </td> 
</tr> 
<tr bgcolor = " # 88FF99"> 
< td align = "center"> 学 号 </td>< td>< input type = "text" папе = "pram_xh"></td></tr > 
<tr bgcolor = Yellow> 
< td align = "center"> 姓 名 </td>< td>< input type = "text" name = "pram_name"></td></tr> 
<tr bgcolor = Yellow> 
<td> 性 别 </td> 
<td>< input type = "radio" value- "5j" папе = "pram sex" checked = "checked"> 男 
< input type = "radio" value = "Ar" папе = "pram_sex"> 女 </td></tr> 
«tr bgcolor = yellow > 
<td align = "center"> 电 话 </td>< td>< input type = "text" name = "pram_tele"></td></tr> 
</tr> 
«tr bgcolor = yellow > 
<td align = "center" colspan = "2"> 
< input type = "submit" value = "提交 "> 
< input type = "reset" value = " 重 置 "></td></tr> 
</table> 


</form> 
</body> 
</html> 


将 表单 提交 的 信息 存 人 数据 库 的 程序 inertExec. jsp 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf 一 8" %> 
<% @ page import = "java. sql. *" %> 
<html> 
<head> 
</head> 
<body> 
<% request. setCharacterEncoding("utf - 8"); // 设 定 从 request 对 象 中 读 取 参 数 的 编码 方式 
Class. forName( "com. mysql. jdbc. Driver"); 
Connection con = DriverManager. getConnection(" jdbc :mysq] : //localhost:3306/student? 
useUnicode = true&characterEncoding = СВК", " root" , " 123") ; 
Statement stmt - con.createStatement(); 
String s xh- request.getParameter("pram xh"); 
String s name = request. getParameter("pram name"); 
String s sex- request.getParameter("pram sex"); 
String s tele = request. getParameter("pram tele"); 
String instsql - "insert into stuinfo (xh, name, sex, tele) 
values( '" + s xh* "','" + s name + " ', '" + s sex + "', '" + s_tele+ "');" ; 
stmt. executeUpdate( instsql); 
response. sendRedirect("showInfo. jsp"); 
5» 
</body> 
</html> 


(3) 运行 insertInfo. jsp 程序 ,效果 如 图 5-6 所 示 。 
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图 5-6 添加 记录 的 表单 
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【实验 任务 】 


编写 JSP 程序 ,使 用 JDBC 访问 数据 库 , 更 新 数据 库 中 表 的 记录 。 本 实验 的 目的 是 让 学 
生 掌 握 使 用 JDBC 更 新 数据 库 中 表 的 记录 。 使 用 JDBC 更 新 数据 库 中 表 的 记录 的 SQL 请 
句 如 下 : 


int п = stmt.executeUpdate(updateSql);  //updateSql 为 更 新 记录 的 SQL 语句 ,返回 值 n 为 更 新 的 
// 记 录 数 


本 实验 继续 完成 实验 5. 1 中 showInfo. jsp 页 面 的 “修改 ”功能 。 
【实验 步骤 】 


(1) 编写 updatelnfo. jsp。 

具体 要 求 : 从 updatelnfo. jsp 页 面 读 出 原 有 信息 ,提供 一 个 修改 表单 ,该 表单 显示 当前 
学 生 的 原始 信息 ,允许 对 该 学 生 的 姓名 、 出 生日 期 和 E-mail 进行 修改 ,再 将 表单 提交 到 
newResult. jsp 页 面 。 

(D updateInfo. jsp 参考 代码 如 下 ; 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<% @ page import = "java. sql. *" %> 
<html> 
<head> 
<title> MY JSP 'updateInfo. jsp' starting page </title> 
</head> 
<body> 
<% Class. forName( "com. mysq1. jdbc. Driver"); 
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student? 
useUnicode = true&characterEncoding = GBk" , " root" , " 123") ; 
Statement stmt = con.createStatement(); 
String seleStr = "SELECT * FROM stuinfo where xh = '" + request.getParameter("pram xh") *"'"; 
ResultSet rs = stmt. executeQuery(seleStr); 
rs.next(); 
session.setAttribute("pram xh",request.getParameter("pram xh")); 
%> 
< form action = "updateExec. jsp" method = "post"» 
«table bgcolor = red» 
«tr bgcolor= yellow > 
< td align = "center" colspan = "2"> 要 修改 信息 的 同学 学 号 是 : <% = request. getParameter 
("pram xh") %></td> 
</tr> 
<tr bgcolor = " # 88FF99"> 
< td align = "center"> 原 始 信息 </td>< td align = "center"> 修 改 信息 </td></tr> 
«tr bgcolor= yellow» 
<td> 姓 名 :<% = rs.getString(" name") $ ></td >< td > < input type = "text" value =<% = rs. 


getString("name") % > name = "pram_name"></td></tr > 
<tr bgcolor = yellow> 

<td> 性 别 :<$ = rs.getString("sex") %></td> 

<td>< input type = "radio" value- "Sj" папе = "pram ѕех" checked = "checked"> 男 

< input type = "radio" value = "Zr" папе = "pram_sex"> 女 </td></tr> 

<tr bgcolor = yellow> 
<td> 电 话 :<% = rs.getString("tele") %></td> 
<td>< input type = "text" value =<% = rs.getString("tele") %> папе = "pram tele"></td> 
</tr> 
<tr bgcolor= yellow> 


<tdalign= "center" colspan= "2"> 
< input type = "submit" value = "提交 " папе = "Bl" 
< input type = "reset" value = " 重 置 " name = "B2"></td> 
</tr> 
</table> 
«/form» 
</body> 
</html> 


@ 该 程序 功能 是 接收 修改 表单 提交 的 信息 ,并 对 数据 库 进 行 更 新 ,本 JSP 文件 运行 时 
对 用 户 透明 ,无 界面 可 见 。 
updateExec. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" $» 
<% @ page import = 
<html> 
<head> 
</head> 
<body> 
<% request. setCharacterEncoding("utf - 8") ; // Е A request 对 象 中 读 取 参数 的 编码 方式 
Class. forName( "con. mysql. jdbc. Driver"); 
Connection con = DriverManager. getConnection(" jdbc : mysql : //localhost:3306/student? 
useUnicode = true&characterEncoding = GBk" , " root" , " 123") ; 
Statement stmt = con.createStatement(); 
String s xh- (String)session.getAttribute("pram xh"); 


java. sql. *" %> 


String s name = request.getParameter("pram name"); 
String s sex- request.getParameter("pram sex"); 
String s tele = request.getParameter("pram tele"); 
String updatesql- "update stuinfo set name = '" + s name + "', ѕех = '" + s sex + "', tele 
= '" + s_tele+ 
"'where xh= '"+s_xh+"';" ; 
stmt. executeUpdate(updatesql); 
response. sendRedirect(" showInfo. jsp"); 
%> 
</body> 
«/htnl > 


(2) 运行 程序 ,巩固 JDBC 工作 原理 。 
updateInfo. jsp 运行 效果 如 图 5-7 所 示 o 
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图 5-7 修改 记录 的 表单 


实验 5.4 删除 记录 


【实验 任务 】 


编写 JSP 程序 ,使 用 JDBC 访问 数据 库 , 更 新 数据 库 中 表 的 记录 。 本 实验 的 目的 是 让 学 
生 掌 握 使 用 JDBC 删除 数据 库 中 表 的 记录 。 使 用 JDBC 更 新 数据 库 中 表 的 记录 的 SQL 语 
句 如 下 : 


int п = stmt.executeUpdate(deleteSql);  //deleteSql 为 删除 记录 的 SOL 语句 ,返回 值 n 为 删除 的 
// 记 录 数 


本 实验 继续 完成 实验 5. 1 中 showInfo. jsp 页 面 的 “删除 ”功能 。 
【实验 步骤 】 


(1) 编写 程序 deleteStu. jsp。 

deleteStu. jsp 的 具体 要 求 : showInfo. jsp 页 面 的 “删除 ?接受 请 求 传递 过 来 的 学 号 (xh) 
参数 ,根据 接收 到 的 学 号 使 用 JDBC 删除 数据 库 表 中 相应 学 号 的 记录 。 该 JSP 文件 对 用 户 
透明 ,无 界面 可 见 。 

deleteStu. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf -8" %> 
<% @ page import = "java. sql. *" %> 
<html> 
< head> 
</head> 
< body> 
<% request. setCharacterEncoding( "utf - 8") ; // E Jk request 对 象 中 读 取 参 数 的 编码 方式 
Class. forName( "com. mysql. jdbc. Driver"); 
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student? 


useUnicode = true&characterEncoding = СВК", "root","123"); 


Statement stmt = con.createStatement(); 
String s_xh= request. getParameter("pram xh"); 


String delsql = "delete from stuinfo where xh='"+s xh+"';" ; 


stmt. executeUpdate(delsql); 
response. sendRedirect("showInfo. jsp"); 
5 
</body> 
</html> 


(2) 运行 程序 ,加 深 理解 和 掌握 JDBC 访问 数据 库 技术 。 
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第 6 章 JavaBean 技术 


JavaBean 是 一 种 Java 语言 写成 的 可 重用 组 件 , 是 符合 某 种 规范 的 Java 类 ,JavaBean 满 
足 如 下 规范 : 

。 JavaBean 类 是 具体 的 和 公共 的 ; 

* 必须 有 一 个 无 参数 的 默认 构造 函数 ; 

。 必须 有 get 和 set 方法 ,类 的 字段 通过 get 和 set 方法 访问 。 

ТЕ JSP 页 面 中 访问 JavaBean 的 方法 有 直接 访问 和 JSP 标签 访问 两 种 。 

(1) 直接 访问 JavaBean 的 方法 : 

首先 在 页 面 顶 部 导入 JavaBean Ж. 

<% @ page import =" javabean.userBean" %> 

在 JSP 段 实例 化 JavaBean: 

<% userBean user = new userBean(); %> 

使 用 二 % user. setXXX(aa); 947 Ж1< 94 = user. ве ХХХО); % >W] bean 的 属性 。 
(2) 标签 访问 JavaBean 的 方法 : 

在 JSP 页 面 使 用 userBean 标签 : 

< jsp:useBean id = "user" class = "javabean. userBean" /> 

通过 一 jsp:setProperty name= "user" property= "name" рагат = "mUserName" / > #1 


二 jsp:getProperty name 一 "user”property 一 "name"/ 二 设置 或 获取 bean 的 属性 。 


【实验 目的 】 
掌握 JavaBean 的 工作 原理 ,熟悉 JavaBean 的 设计 要 点 ,在 JSP 程序 中 灵活 使 用 


JavaBean, 


实验 6.1 使 用 JavaBean 自动 获取 表单 参数 


【实验 任务 】 

编写 JSP 程序 ,使 用 JavaBean 自动 获取 表单 参数 ,验证 当 表单 参数 名 称 与 JavaBean 属 
性 名 称 不 一 致 时 自动 获取 表单 参数 。 目 的 是 让 学 生 掌 握 使 用 JavaBean 自动 获取 表单 参数 ， 
为 实际 项 目 开发 打下 基础 。 需 要 设计 的 程序 有 : 


。 设计 一 个 JavaBean 类 Student. java; 
。 设计 表单 页 面 input. jsp ,传递 参数 ; 
。 设计 接收 表单 参数 的 页 面 receive. jsp. f FH JavaBean 自动 获取 表单 传 来 的 参数 。 


【实验 和 步骤】 


(1) 编写 一 个 JavaBean X fff Student. java) 和 两 个 JSP 文件 (input. jsp 和 receive. jsp) 
文件 。 

Student. java 的 具体 要 求 : 该 JavaBean 包含 学 号 .姓名 属性 以 及 相应 的 getter 和 setter 
方法 。 

input. jsp 的 具体 要 求 : input. jsp 提供 用 户 填 写 学 号 和 姓名 参数 ,将 表单 信息 提交 到 
receive. jsp 进行 处 理 。 

receive. jsp 的 具体 要 求 : receive. jsp 首先 使 用 JavaBean 自动 获得 input. jsp 提交 的 xh 
和 name 字段 ,然后 显示 获取 的 参数 。 

Student. java 参考 代码 如 下 : 


package bean; 

public class Student ( 

private String xh; 

private String name; 

private String birthday; 

public String getXh() ( 
return xh;} 

public void setXh(String xh) ( 
this.xh = xh;) 

public String getName() ( 
return name; } 

public void setName(String name) { 
this. name = папе; } 

public String getBirthday() { 
return birthday; } 

public void setBirthday(String birthday) { 
this. birthday = birthday; } 

) 


input. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<html> 
< head> 
«title» input. jsp </title> 
</head> 
< body> 
< form action = "recieve. jsp" method = "post"> 
学 号 : < input type = "text" name = "xh">< br» 
姓名 : < input type = "text" name = "name">< br > 
出 生日 期 : < input type = "text" папе = "birthday">< br > 
< input type = "submit" value = "提交 "> 
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</form> 
</body> 
</html > 


recieve. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf 一 8" 委 > 
< jsp:useBean id= "st" class = "bean. Student" scope = "request" /> 
<html> 
< head> 
«title» JavaBean test </title> 
</head> 
< body> 
< % request. setCharacterEncoding("utf - 8"); %> 
直接 从 表单 自动 获取 到 的 参数 如 下 : <br> 
< jsp:setProperty name = "st" property =" * "/> 
学 号 : <% = st.getXh() $»«br» 
姓名 : <% = st.getName() %> «br» 
出 生日 期 : <% = st.getBirthday() %> «br»«br» 
通过 request. getParameter( ) 获 取 到 的 表单 参数 如 下 : <br> 
学 号 : <% = request. getParameter("xh")%><br> 
姓名 : <% = request. getParaneter("name") %> <br> 
出 生日 期 : <% = request. getParameter("birthday") > <br> 
</body> 
«/htnl» 


所 示 。 


inpet jsp — Vindons Taternet ТАЕ —— 
өе) 直接 从 表单 自动 获取 到 的 参数 如 下 : 
I i p || 学 号 : 1618190001 
姓名 : mex 


学 号 : [1618190001 | 出 生日 期 1996.08.08 
ВА | 


通过 request.getParameter( ) 获取 到 的 表单 参数 如 下 : 
学 号 : 1618190001 

姓名 : ал 

出 生日 期 : 1996.08.08 


图 6-1 利用 表单 自动 获取 参数 


实验 6.2 有效 范围 为 request 的 bean 


【实验 任务 】 


编写 JSP 程序 ,使 用 有 效 范围 是 request 的 JavaBean 显示 汽车 的 基本 信息 。 目 的 是 让 
学 生 掌握 使 用 有 效 范围 是 request 的 bean, 


JSP 页 面 使 用 useBean 标记 调用 一 个 有 效 范围 是 request 的 JavaBean 的 语法 如 下 : 

< jsp:useBean id = "bean 的 名 字 " class = "创建 bean 的 类 " scope = "request"> </jsp:useBean> 
或 

< jsp:useBean id= "bean 的 名 字 " class= "创建 bean 的 类 " scope = "request"/> 


该 bean 的 有 效 范围 是 当前 请 求 ("request"), 当 本 次 请 求生 命 周 期 结束 后 ,JSP 引擎 取 
消 分 配给 该 客户 的 bean。 


【实验 步骤 】 


CD 编写 一 个 名 字 为 Car. java 的 Javabea。Car. java 的 具体 要 求 : 含有 汽车 号 码 、 名 称 
和 生产 日 期 的 属性 ,并 提供 相应 的 getXxx() 和 setXxx() 方 法 ,来 获取 和 修改 这 些 属性 的 值 。 
Car. java 参考 代码 如 下 : 


package bean; 
public class Car 
{ 
String number, name, madeTime; 
public String getNumber() 
( 
try( byte b[ ] = number. getBytes("ISO - 8859 - 1"); 
number = new String(b); ) 
catch(Exception e)() 
return number; } 
public void setNumber(String number) 
( 
this. number = number; } 
public String getName() 
{ 
try{ byte Ы ] = пате. getBytes("ISO- 8859 – 1"); 
папе = new String(b); } 
catch(Exception е) () 
return name; ) 
public void setName(String name) 
{ this.name = name; } 
public String getMadeTime() 
{ 
try{ byte b[ ] = madeTime. getBytes("ISO - 8859-1"); 
madeTime = new String(b); ) 
catch(Exception е){} 
return madeTime; ) 
public void setMadeTime(String time) 
( 


madeTime = time; ) 
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(2) 编写 input AndShow. jsp 页 面 。 在 inputAndShow. jsp 页 面 中 创建 一 个 名 为 car 的 
JavaBean。 该 页 面 提供 一 个 表单 供用 户 输入 汽车 的 牌号 、 名 称 和 生产 日 期 。 该 表单 将 用 户 
输入 的 信息 提交 给 当前 页 面 ,当前 页 面 使 用 表单 提交 数据 设置 car 有 关 属 性 的 值 , 然 后 显示 
е Та 
inputAndShow. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = gbk" %> 
< jsp:useBean id = "car" class = "bean. Car" scope = "request" /> 
<html> 
< body bgcolor = lightgreen > 
<font size=4> 
< form action = "" Method = "post"> 
汽车 号 牌 : < input type = text name = "number">< br > 
汽车 名 称 : < input type = text name = "name">< br > 
生产 日 期 : < input type = text name = "madeTine"»« br > 
< input type = subnit value = "提交 "> 
</forn> 
< jsp:setProperty папе = "car" property = " * "/> 
«table border = 1 > 
<tr><th> 汽 车 号 牌 </th> « th> 汽 车 名 称 </th> <th> 生 产 日 期 </th> </tr> 
<tr><td>< jsp:getProperty name = "car" property = "number"/></td> 
<td>< jsp:getProperty name = "car" property = "name" /></td> 
<td>< jsp:getProperty name = "car" property = "madeTime" /> 
</tr> 
</table> 
</font> 
</body> 
</html > 


(3) 在 浏览 器 地 址 栏 输入 http://localhost: 8080/jspsx/ch06/inputAndShow. jsp, 2 
效果 ,如 图 6-2 所 示 。 
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6-2 JavaBean 的 有 效 范 围 是 request 


实验 6.3 ”有效 范围 为 session 的 bean 


【实验 任务 】 

编写 JSP 程序 ,使 用 有 效 范围 是 session 的 JavaBean ,显示 汽车 的 基本 信息 。 目 的 是 让 
学 生 掌握 有 效 范围 是 session 的 JavaBean, 

JSP 页 面 使 用 useBean 标记 调用 一 个 有 效 范围 是 session 的 JavaBean 的 语法 如 下 : 


< jsp:useBean id= "bean 的 名 字 " class = "创建 bean 的 类 " scope = "session"></jsp:useBean > 
或 
<jsp:useBean id= "bean 的 名 字 " class= "创建 bean 的 类 " scope = "session"/> 


如 果 用 户 在 某 个 Web 服务 的 多 个 页 面 中 进行 访问 ,每 个 页 面 都 含有 一 个 useBean 标 
记 , 而 且 各 个 页 面 的 useBean 标记 中 id 的 值 相同 ,scope 的 值 都 是 session, 那 么 ,该 用 户 在 这 
些 页 面 得 到 的 bean 是 相同 的 (占有 相同 的 内 存 空间 )。 如 果 用 户 在 某 个 页 面 更 改 了 这 个 
bean 的 属性 ,其 他 页 面 的 这 个 bean 的 属性 也 将 发 生 同 样 的 变化 。 当 用 户 的 会 话 (session) 
消失 后 ,JSP 引擎 取消 分 配 的 bean, 即 释放 bean 所 占有 的 内 存 空间 。 

需要 注意 的 是 ,不 同 用 户 的 scope 取 值 是 session 的 bean ,是 互 不 相同 的 (占有 不 同 的 内 
存 空间 ) ,也 就 是 说 , 当 两 个 用 户 同 时 访问 一 个 JSP 页 面 时 ,一 个 用 户 对 自己 bean 属性 的 改 
变 ,不 会 影响 到 另 一 个 用 户 。 


【实验 步骤 】 


CD 编写 两 个 JSP 页 面 : inputtoshow. jsp 和 show. jsp. Car. java 源 文 件 与 实验 6. 2 中 
的 相同 。 
inputtoshow. jsp 的 具体 要 求 : input. jsp 页 面 提供 一 个 表单 供用 户 输入 汽车 的 牌号 、 名 
称 和 生产 日 期 ,该 表单 将 用 户 输入 的 信息 提交 给 当前 页 面 ,当前 页 面 调用 名 字 为 car 的 
bean, 并 使 用 表单 提交 的 数据 设置 car 的 有 关 属 性 的 值 。 要 求 在 inputtoshow. jsp 提供 一 个 
itt Be ,以 便 用 户 单 击 这 个 超 链 接 访 问 show. jsp 页 面 。 
show. jsp 的 具体 要 求 : show. jsp 调用 名 字 为 car 的 bean, 并 显示 该 bean 的 各 个 属性 
的 值 。 
inputtoshow. jsp 参考 代码 如 下 : 
< % @ page contentType = "text/html;charset =utf -8" %> 
<% @ page import = "bean. Car" % > 
< jsp:useBean id = "car" class = "bean. Саг" scope = "session" /> 
<html> 
< body bgcolor = lightyellow > 
< font size = 2» 
< form action = "show. jsp" method = "post"> 
汽车 号 牌 : < input type = text name = "number"> < br» 
汽车 名 称 : < input type = text папе = "name"> < br > 
生产 日 期 : < input type = text name = "madeTime"> 
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或 


< input type = submit value = "提交 "> 


</form> 


< jsp:setProperty name = "car" property = " * "/> 
<a href = "show. jsp"> 访 问 show. jsp, 查 看 有 关 信 息 。</a> 


</font> 
</body> 
</html> 


show. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = GB2312" %> 
<% (à page import = "bean. Саг" % > 
< jsp:useBean id = "car" class = "bean. Саг" scope = "session" /> 


<html> 


< body bgcolor = yellow > 
< table border = 17 
<tr><th> 汽 车 号 牌 </th> <th> 汽 车 名 称 </th> <th> 生 产 日 期 </th> </tr> 


<tr> 


<td>< jsp:getProperty name = "car" property = "number"/></td> 
<td>< jsp:getProperty name = "car" property = "name" /></td> 


< td»« jsp:getProperty папе = "car" property = "madeTime" /> 


</tr> 
</font> 
</body> 
</html> 


(2) 程序 运行 ,效果 如 图 6-3 所 示 。 


ITEM х) ost B00/ jsppr set Ыш) 
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生产 日 期: [20152718 


访问 shov, isp 查看 有 关 信息 。 


| 
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实验 6.4 有 效 范 围 为 application 的 bean 


【实验 任务 】 


编写 JSP 程序 ,使 用 有 效 范围 是 application 的 JavaBean ,制作 一 个 简单 的 留言 板 。 
JSP 页 面 使 用 useBean 标记 调用 一 个 有 效 范围 是 application 的 bean 的 语句 如 下 : 


< jsp:useBean 


< jsp:useBean 


id= "bean 的 名 字 " class= "bean 的 类 " ѕсоре = "application"></jsp:useBean> 


id= "bean ËJ £" class= "bean 的 类 " scope = "application"/> 


JSP 引擎 为 Web 服务 目录 下 所 有 的 JSP 页 面 分 配 一 个 共享 的 bean, 不 同 用 户 scope Jt 
值 是 application 的 bean 都 相同 ,也 就 是 说 , 当 多 个 用 户 同时 访问 一 个 JSP 页 面 时 ,任何 一 
个 用 户 对 自己 bean 的 属性 的 改变 ,都 会 影响 到 其 他 用 户 。 


【实验 和 步骤】 


CD 编写 一 个 名 字 为 MsgBoard. java 的 JavaBean 类 。 该 类 包含 留言 者 的 姓名 、 留 言 标 
题 和 留言 内 容 等 属性 ,并 且 有 全 部 留言 信息 的 属性 allMessage。 
MsgBoard. java 参考 代码 如 下 : 


package bean; 
import java.util. *; 
import java. text. SimpleDateFormat; 
public class MsgBoard 
{ 
String name, title, content; 
StringBuffer allMessage; 
ArrayList < String > savedName, savedTitle, savedContent, savedTime; 
public MsgBoard() 

{ savedName = new ArrayList < String»(); 
savedTitle = new ArrayList < String»(); 
savedContent = new ArrayList < String»(); 
savedTime- new ArrayList < String»(); } 

public void setName(String s) 
{ name = s; 
savedName. add(name) ; 
Date time = new Date(); 
SimpleDateFormat matter = new SimpleDateFormat("yyyy – MM — dd HH:mm:ss"); 
String messTime - matter. format(time); 
savedTime. add(messTime); ) 
public void setTitle(String t) 
{ title-t; 
savedTitle.add(title); ) 
public void setContent(String c) 
( content = c; 
savedContent.add(content); } 
public StringBuffer getAllMessage() 
(allMessage = new StringBuffer(); 
allMessage. append("« table border = 1 >"); 
allMessage. append("« tr >") ; 
allMessage. append("« th> 留 言 者 姓名 </th>"); 
allMessage. append( "< th> 留 言 标题 </th>"); 
allMessage. append( "< th> 留 言 内 容 </th>"); 
allMessage. append("< th> 留 言 时 间 </th>"); 
allMessage. append("</tr >"); 
for(int К = 0;k < savedNane. size( );k++) 
{ 
allMessage. append("« tr >"); 
allMessage. append("« td>"); 
allMessage. append( savedName. get (k) ) ; 
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allMessage. append("«/td»"); 
allMessage. append("« td>"); 
allMessage. append( savedTitle.get(k)); 
allMessage. append( "</td>"); 
allMessage. append("« td>"); 
allMessage. append("« textarea >"); 
allMessage. append( savedContent. get(k)) ; 
allMessage. append("«/textarea >"); 
allMessage. append("«/td »") ; 
allMessage. append("« td>"); 
allMessage. append( savedTime. get (k) ) ; 
allMessage. append("«/td »") ; 
allMessage. append("« tr >"); 
) 
allMessage. append( "«/table >"); 
return allMessage; 
) 
) 


(2) 编写 两 个 JSP Jt ifii; inputMessage. jsp 和 show. jsp. 

inputMess. jsp 的 具体 要 求 : inputMess. jsp 页 面 提供 一 个 表单 。 其 中 表单 允许 用 户 输 
人 留言 者 的 姓名 、 留 言 标题 和 留言 内 容 期 ,该 表单 将 用 户 输入 的 信息 提交 给 当前 页 面 ,当前 
页 面 调 用 名 字 为 board 的 bean, 并 使 用 表单 提交 的 数据 设置 board 有 关 属 性 的 值 。 要 求 在 
inputMess. jsp 提供 一 个 超 链接 ,以 便 用 户 单 击 这 个 超 链接 访问 showmsg. jsp И]. 

showmsg. jsp 的 具体 要 求 : show. jsp 调用 名 字 为 board 的 bean, 并 显示 该 bean 的 
allMessage 属性 的 值 。 

inputmsg. jsp 参考 代码 如 下 : 


<% (à раде contentType = "text/html;charset = utf -8" %> 
< jsp:useBean id = "board" class = "bean. MsgBoard" scope = "application" /> 
<html> 
<body> 
< form action = "" method = "post" name = "form"> 
输入 您 的 名 字 : <br> < input type="text" папе = "name">< br> 
输入 您 的 留言 标题 : <br> < input type="text" папе = "title"><br> 
输入 您 的 留言 : <br> 
< textarea name = "content" ROWs = "10" COLS = 36 WRAP = "physical"></ textarea >< br» 
< input type = "submit" value = "提交 信息 " name = "submit"> 
</forn> 
< * request. setCharacterEncoding("utf – 8"); %> 
< jsp:setProperty папе = "board" property =" * "/» 
<a href = "showmsg. jsp"> 查 看 留言 板 </a> 
</body> 
«/htnl > 


showmsg. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = utf - 8" %> 
< jsp:useBean id = "board" class = "bean. MsgBoard" scope = "application" /> 


< html > 
< body bgcolor = yellow > 
<% request. setCharacterEncoding("utf - 8"); %> 
< jsp:getProperty name = "board" property = "allMessage"/> 
<a href = "inputmsg. jsp"> 我 要 留言 </a> 
</body> 
</html> 


(3) 运行 inputmsg. jsp 和 showmsg.jsp, 效 果 如 图 6-4 所 示 。 


http://localhost:8080/jsppractie MES 


输入 您 的 名 字 ， 
输入 您 的 留言 标题 ， 


输入 您 的 留言 ， 
SPE NX: 


2015-02-25 19:51:09 


2015-02-25 19:52:38 
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实验 6.5 用 户 登录 设计 


【实验 任务 】 


设计 一 个 用 户 登 录 应 用 程序 ,使 用 业务 类 服务 数据 库 ,接受 用户 提交 的 登录 表单 ,查询 
数据 库 中 是 否 存 在 该 用 户 。 


【实验 步骤】 


(1) 编写 访问 数据 库 的 业务 类 Javabean(DBcon. java) , X* 3t Jt ifii login. jsp、 验 证 页 面 
checkUser. jsp 和 登录 成 功 页 面 main. html, 
bean. DBcon. java 参考 代码 如 下 ; 


// 数 据 库 连接 类 ,方法 为 public static Connection getConnction() 

// 注 意 : 检查 数据 库 名 、 用 户 名 ,密码 是 否 正 确 

package bean; 

import java. sql. Connection; 

import java. sql. DriverManager; 

import java. sql. PreparedStatement; 

import java. sql. ResultSet; 

import java. sql. SQLException; 

public class DBcon ( 第 
private static final String DRIVER CLASS = "com.mysql. jdbc.Driver"; 6 
private static final String DATABASE URL - = 
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"ас: mysql: //localhost:3306/student?useUnicode = true&characterEncoding = utf - 8"; 
private static final String DATABASE USRE - "root"; 
private static final String DATABASE PASSWORD - "123"; 
// 返 回 连接 
public static Connection getConnction()( 
Connection dbConnection = null; 
try { 
Class. forName(DRIVER CLASS); 
dbConnection = DriverManager.getConnection(DATABASE URL, 
DATABASE USRE, DATABASE PASSWORD); 
) catch (Exception e) { 
e. printStackTrace(); 
) 
return dbConnection; 
) 
// 关 闭 连接 
public static void closeConnection(Connection dbConnection) { 
try{ 
if (dbConnection != null && (!dbConnection. isClosed())) ( 
dbConnection. close(); 
) 
} catch (SQLException sqlEx) ( 
sqlEx. printStackTrace(); 


) 
// 关 闭 结果 集 
public static void closeResultSet(ResultSet res) { 
try { 
if (res != null) { 
res.close(); 
res = null; 
} 
) catch (SQLException e) ( 
e. printStackTrace(); 


) 
public static void closeStatement(PreparedStatement pStatement) ( 


try ( 
if (pStatement != null) ( 
pStatement. close(); 
pStatement = null; 
} 
) catch (SQLException e) { 
e. printStackTrace() ; 


} 
login. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "јаха. sql. * " contentType = "text/html; charset = utf -8" %> 
<html> 


<head> 
<title> 登 录 程序 实验 </title> 
</head> 
<body> 
< table align = "center"> 
<tr><td>< ing SRC= ../img/logintop. jpg »«/img»«/td»«/tr» 
<tr><td align= "center">< p> 
< font color = "red" size= "5" style= "font – family:simhei"> 请 登录 : </font >< p> 
< form method = "post" action = "checkUser. jsp" target = "_blank">< p> 
用 户 名 :< input type = "text" папе = "loginName" size = "20"><р> 
密码 :< input type = "password" name = "passWord" size = "20"><р> 
< input type = "submit" value = "提交 "> 
< input type = "reset" value = " 重 置 "> 
</form></td></tr> 
</table> 
</body> 
</html > 


checkUser. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java. sql. * " contentType = "text/html; charset = utf -8" %> 
< jsp:useBean id = "db" class = "bean. DBcon" scope = "request" /> 
<html> 
<head> 
< title > 登录 验证 页 面 [checkUser. jsp]</tit1e > 
</head> 
<body> 
<% 
request. setCharacterEncoding("utf - 8"); // 解 决 post 提交 的 中 文 乱码 
String name = request. getParameter("loginName"); 
String password = request. getParameter("passWord"); 
第 > 
你 输入 的 用 户 名 是 : <% = nane %><br><br> 
<% 
Connection con = db.getConnction(); 
Statement stmt = con.createStatement(); 
String sql = "select * from userinfo"; // 查 询 userinfo 表 中 的 用 户 信息 
sql += " where loginname = '" + name + "' and password = '" + password + "'"; 
ResultSet rs = stmt.executeQuery(sql); 
if (rs.next()) // 验 证 通过 
{ session. setAttribute( "userName", папе);  // 将 用 户 名 保存 到 session 中 
response. sendRedirect("main. jsp") ; 


else ( // 验 证 未 通过 
out. print(" 无 此 用 户 或 密码 有 误 , 登录 失败 !< br >< br >"); 
out. print("« a href = 'login. jsp 人 > 重新 登录 <//a>"); 


%> 


</body> 
</html > 
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main. jsp 参考 代码 如 下 : 


< % (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<html> 
<head> 
<title> 登 录 成 功 </title> 
</head> 
< body> 
<% = session.getAttribute("userName") % > ; 
恭喜 你 ,登录 成 功 ! < br > 
<a href = login. jsp> 返 回 登录 页 面 </a> 
</body> 
</html > 


(2) 程序 测试 ,分 别 输入 正确 的 和 错误 的 用 户 名 或 密码 ,观察 效果 ,如 图 6-5 所 示 。 
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无 此 用 户 或 密码 有 误 ， 登 录 失 败 ! 
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第 7 = Servlet 基础 知识 


设计 Servlet 程序 时 需 注意 以 下 几 项 : 

(1) 在 由 Servlet. 向 导 所 生成 的 Servlet 中 doGet() 方 法 的 语句 “response. 
setContentType( "text/html");” 改 为 “response. setContentType ( " text/html; charset = 
gb2312");”, 即 增加 “charset 一 gb2312” 以 避免 输出 的 中 文 乱码 。 

(2) 表单 提交 方式 为 POST 时 ,Servlet 在 接收 表单 参数 时 ,要 设置 获取 request 参数 的 
编码 , 即 “request. setCharacterEncoding("gb2312") ;", 

(3) Servlet 的 访问 路 径 是 在 设计 Servlet 时 由 Mapping URL 所 决定 的 。 用 户 访问 
Servlet 的 URL= 项 目 虚拟 路 径 十 Mapping URL 路 径 。 表 单 提 交 或 页 面 跳 转 时 ,要 仔细 分 
析 源 文件 URL 路 径 与 目标 文件 URL 路 径 之 间 的 关系 ,灵活 运用 *./”../”“*/” 相 对 路 径 符 
号 ,“./”../”/” 分 别 表示 相对 于 页 面 基准 路 径 的 当前 路 径 、 上 一 级 路 径 和 Web 服务 的 根 


【实验 目的 】 
掌握 Servlet 的 工作 原理 ,熟悉 Servlet 的 设计 要 点 ,在 JSP 项 目 中 灵活 使 用 Servlet。 


实验 7.1 Servlet 输出 表单 的 全 部 数据 项 


【实验 任务 】 


设计 一 个 Servlet 接收 表单 ,寻找 表单 传 来 的 所 有 变量 名 字 , 并 把 它们 放 入 表格 中 ,没有 
值 或 有 多 个 值 的 变量 都 突出 显示 。 

设计 思路 : 首先 ,程序 通过 HttpServletRequest 的 getParameterNames() 方 法 得 到 表 
单 中 所 有 的 变量 名 字 ,getParameterNames() 方 法 返回 的 是 一 个 枚 举 集合 (Enumeration ) 。 
接 下 来 ,循环 遍历 这 个 Enumeration ,通过 hasMoreElements() 方 法 确定 何 时 结束 循环 , 利 
用 nextElement() 方 法 得 到 Enumeration 中 的 各 个 项 。 由 于 nextElement() 方 法 返回 的 是 
一 个 Object, 要 把 它 转 换 成 字符 串 , 青 调用 getParameterValues() 方 法 得 到 字符 串 数组 ,如 
果 这 个 数组 只 有 一 个 元 素 且 为 空 字符 串 , 说 明 这 个 表单 变量 没有 值 ,Servlet 以 斜体 形式 输 
出 “No Value”; 如 果 数 组 元 素 个 数 大 于 1, 说 明 这 个 表单 变量 有 多 个 值 ,以 列表 形式 输出 这 
些 值 ; 其 他 情况 下 Servlet 直接 把 变量 值 放 入 表格 。 


【实验 步骤 】 
CD 在 sre 下 新 建 servlet 包 ,在 servlet 包 下 使 用 向 导 创 建 Servlet 文件 (ShowParame- 
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tersServlet. java) 。 创 建 时 , 将 Servlet/JSP. Mapping URL 中 的 /servlet/ShowParame- 
tersServlet ik Jj /ShowParametersServlet ,这 样 ,访问 该 Servlet 的 URL 为 http://127. 0.0.1: 
8080/jspsx/ShowParametersServlet 。 
Servlet 在 web. xml 中 的 注册 工作 可 由 向 导 自 动 完成 ,不 必修 改 。 
ShowParametersServlet. java 参考 代码 如 下 : 


package servlet; 
import java. io. IOException; 
import java. io. PrintWriter; 
import javax. servlet.ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import java. іо. * ; 
import javax.servlet. * ; 
import javax. servlet. http. * ; 
import util.ServletUtilities; 
import java. util. * ; 
public class ShowParametersServlet extends HttpServlet ( 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
request. setCharacterEncoding("gb2312"); 
response. setContentType("text/html;charset = gb2312"); 
PrintWriter out = response.getWriter(); 
String title = " 读 取 所 有 请 求 参 数 "; 
out. println(ServletUtilities. headWithTitle(title) + 
"< BODY BGCOLOR = V" # FDF5E6\">\n" + 
"«Hl ALIGN=CENTER>" + title + "</H1>\n" + 
"< TABLE BORDER = 1 ALIGN = CENTER>\n" + 
"< TR BGCOLOR = V" # ЕЕАРОО\">\п" + 
"< TH> 参 数 名 字 < TH> 参 数值 ") ; 
Enumeration paramNames = request.getParameterNames(); 
while(paramNames. hasMoreElements()) { 
String paramName = (String)paramNames. nextElement(); 
out.println("« TR>< TD»" + paramName + "\п<Тр>"); 
String[] paranValues = request.getParameterValues(paramName); 
if (paranValues.length -- 1)( 
String paramValue = paranValues[0]; 
if (paramValue.length() == O0)out.print("« I? No Value </I>"); 
else out. print(paranValue); } 
else { 
out.println("<UL>"); 
for(int i=0; i<paramValues. length; i++) ( 
out.println("<LI>" + paramValues[i]); } 
out. println("</UL>"); ) 


out. println("«/TABLE >\п «/BODY ></HTML >" ) ; 
) 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { doGet(request, response); } 
) 


ShowParametersServlet. java 中 使 用 了 ServletUtilities 类 的 headWithTitle C String 
title) 方 法 设置 页 面 的 “head”,ServletUtilities 类 的 代码 如 下 。 
ServletUtilities. java 参考 代码 如 下 : 


package util; 
public class ServletUtilities { 
public static final String DOCTYPE = 
"<! DOCTYPE HTML PUBLIC V" — //W3C//DTD HTML 4. 0 Transitional//EN\">"; 
public static String headWithTitle(String title) { 
return (DOCTYPE + "Vn" + "< HTML >\n" + "< HEAD >< TITLE >" + title + "</TITLE > «/HEAD >\п"); 
) 
1 


测试 页 面 postForm. html 的 功能 是 通过 表单 向 上 述 Servlet 发 送 数 据 。 该 表单 用 
POST 方法 发 送 数据 。 
postForm. html 参考 代码 如 下 : 


<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
«HTML» 
< HEAD» 
< TITLE > 示例 表单 </TITLE > 
</HEAD> 
< BODY BGCOLOR = " # FDF5E6"> 
< H1 ALIGN = "CENTER"> 用 POST 方法 发 送 数据 的 表单 </H1L > 
< FORM ACTION = "../ShowParametersServlet" METHOD = "POST"> 
学 号 :< INPUT TYPE = "TEXT" NAME = "xh">< BR> 
姓名 :< INPUT TYPE = "TEXT" NAME = "name">< BR> 
专业 :< INPUT ТҮРЕ = "ТЕХТ" МАМЕ = "zy" value = "网 络 工程 "><BR> «HR» 
email :< INPUT TYPE = "TEXT" NAME = "email"»« BR» 
联系 电话 :< INPUT TYPE = "TEXT" NAME = "tele">< BR» 
家 庭 住址 : < TEXTAREA МАМЕ = "address" ROWS = 3 COLS = 40 ></TEXTAREA >< BR» 
银行 卡 类 型 :< BR> 
< INPUT TYPE = "RADIO" NAME = "cardType" value = "Visa"> Visa< BR> 
< INPUT ТҮРЕ = "RADIO" МАМЕ = "cardType" value = "Amex"> American Express < BR > 
< INPUT TYPE = "RADIO" NAME = "cardType" value = "Discover"> Discover < BR» 
< INPUT TYPE = "RADIO" NAME = "cardType" value = "Java SmartCard"> SmartCard< BR> 
银行 卡号 : < INPUT TYPE = "PASSWORD" МАМЕ = "cardNum">< BR» 
请 重复 输入 银行 卡号 : < INPUT ТҮРЕ = "PASSWORD" МАМЕ = "cardNum">< BR>< BR» 
<CENTER> <INPUT ТҮРЕ = "SUBMIT” value= "Submit "> </CENTER> 


</FORM> 第 
</BODY> 7 
</HTML> = 
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(2) 输入 URL ,程序 的 运行 效果 如 图 7-1 所 示 。 
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图 7-1 利用 Servlet 读 取 表 单 参数 


实验 7.2 Servlet 用 户 登 录 验 证 


【实验 任务 】 


编写 JSP 程序 ,实现 用 户 提交 登录 表单 给 Servlet, H Servlet 查询 数据 库 , 对 用 户 是 否 
存在 进行 验证 。 


【实验 步骤 】 


(1) 首先 使 用 Servlet 向 导 ,编写 一 个 验证 用 户 的 Servlet(LoginServlet. java) ,再 编写 
登录 页 面 程序 login. html、 登 录 成 功 页 面 welcome. jsp 和 登录 失败 页 面 loginfail. jsp。 
LoginServlet. java 参考 代码 如 下 : 


package servlet; 

import java. io. IOException; 

import java. io. PrintWriter; 

import java. sql. * ; 

import javax. jms. Session; 

import javax. servlet. ServletException; 

import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import javax. servlet. http. HttpSession; 

import bean. DBcon; 

public class LoginServlet extends HttpServlet { 


public LoginServlet() ( 
super(); 


) 
public void destroy() ( 
super.destroy(); 


} 


public void doGet (HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 


String userName = request.getParameter("loginName"); 


String passWord = request.getParameter("passWord"); 


String sql = "select * from userinfo"; // 
sql+= " 
HttpSession session = request.getSession(); 
Connection con = DBcon. getConnction(); 
Statement stmt; 
ResultSet rs; 
try ( 
stmt = con.createStatement(); 
rs = stmt.executeQuery(sql); 
if (rs.next()) 
( session. setAttribute("userName" , userName) ; 
response. sendRedirect(". /ch07 /welcome. jsp"); 
) 


else { 


response. sendRedirect(". /ch07/1oginfail. jsp"); 


) 

) catch (SQLException e) ( 
//TODO Auto - generated catch block 
e. printStackTrace(); 


) 


// 
// 


// 


where loginname = '" + userName + "' and password = '" + passWord + " '" ; 


public void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException ( 
doGet (request, response) ; 
) 
public void init() throws ServletException ( 


) 
} 


Servlet 在 web. xml 中 的 注册 由 向 导 自 动 完成 。 
login. html 参考 代码 如 下 : 


<html> 
<head> 
« title» login. html </title> 
</head> 
<body> 
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< table align = "center"> 
<tr><td>< img SRC = ../img/logintop. jpg »«/img»«/td»«/tr» 
<tr><td align= "center">< p> 
< font color = "red" size="3" style= "font - family:simhei"> 请 登录 : </Ғопі><р> 
< form method = "post" action = "../LoginServlet" target = "_blank">< p> 
用 户 名 :< input type = "text" name = "loginName" size = "20">< p> 
密码 :< input type = "password" name = "passWord" size = "20"><р> 
< input type = "submit" value = "提交 "> 
< input type = "reset" value = " 重 置 "> 
</form></td></tr> 
</table> 
</body> 
</html> 


welcome. jsp 参考 代码 如 下 : 


< % @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN"» 


<html> 
<head> 
< neta http- equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> 登 录 成 功 </title> 
</head> 
<body> 
< font size = "2" color = "red"> 
<% 
Date today = new Date(); 
int d = today.getDay(); 
int h = today.getHours(); 
Strings = ""; 
if (h>0 & h< 12) s = "EFI"; 
else if (h>= 12) s = "F'rüf!"; 
String day[] = ( "В", "—", "—", "=", "W", "E", "六 " }; 
out.println(s + "今天 是 : 星期 " + day[d]); 
%></font >< br > 
<% = session. getAttribute("userName") % >, 恭喜 你 ,登录 成 功 ! <br> 
</body> 
</html > 


loginfail. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 


<html> 
<head> <title> 登 录 失 败 </title></head> 
<body> 
无 此 用 户 , 单 击 <a href = "login. html"> 这 里 </a> 返 回 , 重 新 登录 ! 
</body> 


</html> 


(2) 输入 URL ,提交 表单 ,效果 如 图 7-2 所 示 。 
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图 7-2 利用 Servlet 处 理 用 户 登录 验证 


实验 7.3 验证 码 登 录 应 用 


验证 码 的 主要 目的 是 强制 人 机 交互 ,抵御 来 自 机 器 的 自动 化 攻击 ,有 效 防止 黑客 对 注册 
用 户 采用 特定 程序 暴力 破解 方式 不 断 地 进行 登录 尝试 , 像 百度 贴吧 未 登录 发 帖 要 输入 验证 
码 就 可 以 防止 大 规模 匿名 回帖 的 发 生 。 

验证 码 是 将 一 串 随机 产生 的 数字 或 符号 生成 一 幅 图 片 ,图 片 里 加 上 一 些 干扰 像素 (防止 
OCR) ,由 用 户 肉 眼 识别 其 中 的 验证 码 信息 ,输入 表单 提交 验证 ,验证 成 功 后 才能 使 用 某 项 
功能 。 因 为 验证 码 是 一 个 混合 了 数字 或 符号 的 图 片 , 人 眼看 起 来 都 费劲 ,机 器 识别 起 来 就 更 
困难 。 


【实验 任务 】 


在 实验 7.2 的 基础 上 ,增加 了 验证 码 功 能 ,其 中 的 验证 码 的 图 片 生成 由 ImageServlet 

实验 时 ,首先 准备 好 用 户 信息 数据 库 , 数 据 库 名 为 student, 用 户 信 息 表 名 为 userinfo, 
访问 数据 库 采 用 常规 的 数据 库 连 接 类 DBcon。 登 录 表 单 文件 为 log. jsp, 带 验证 码 功能 。 用 
户 输入 用 户 名 、 密 码 ,验证 码 后 ,将 表单 提交 给 LogimgServlet 进行 验证 码 和 数据 库 比 对 判 
断 ,如 正确 , 则 跳 转 到 welcome. jsp 页 面 ; 否则 , 跳 转 到 logfail. jsp 页 面 。 验 证 码 工 作 原 理 如 
图 7-3 所 示 。 


【实验 步骤 】 


(1) 准备 好 数据 库 及 用 户 信 息 表 。 

(2) 将 JDBC 驱动 jar 包 复 制 到 Tib 中 。 

(3) 分 别 编写 ImageServlet. java, LogimgServlet. java, log. jsp, welcome. jsp, logfail. 
jsp 等 程序 文件 。 


Servlet 基础 知识 


Bw 


JSP Web REAR Hs viste 


log.jsp 


用 户 名 


logfail.jsp 


验证 码 


查询 数据 库 
的 用 户 信息 


生成 验证 码 


TmageServlet 


piccode-9516 
(session 对象 ) 


7-3 Servlet 实现 验证 码 原理 图 


ImageServlet. java 负责 生成 验证 码 的 图 片 。 该 Servlet 首先 生成 随机 数 ,再 使 用 awt 图 
形 包 中 相应 的 类 将 随机 数 绘制 成 图 形 向 JSP 页 面 输出 ,同时 将 生成 的 验证 码 数 据 保存 在 
session 中 , 供 程序 将 其 与 用 户 输入 的 验证 码 比 对 验证 。 程 序 中 使 用 了 java. awt. image. 
BufferedImage 类 生成 图 片 ,BufferedImage 是 抽象 类 Image 的 子 类 , 它 在 Image 基础 上 增加 
了 缓存 功能 ,由 BufferedImage 类 生成 的 图 片 在 内 存 里 有 一 个 图 像 缓 冲 区 ,利用 这 个 缓冲 区 
可 以 方便 地 操作 这 个 图 片 ,通常 用 来 做 图 片 修改 操作 ,如 大 小 变换 .图 片 变 灰 .设置 图 片 透明 
或 不 透明 等 。 

BufferedImage 的 构造 方法 为 : 


BufferedImage( int width, int height, int imageType) 


其 中 ,width 为 生成 图 片 的 宽度 ; height 为 生成 图 片 的 高 度 ; imageType 为 图 片 颜 色 类 
型 常量 。 

LogimgServlet. Java 负责 登录 信息 验证 ,首先 接收 表单 提交 的 用 户 名 、 密 码 、 验 证 码 , 用 
户 名 和 密码 与 数据 库 比 对 验证 ,验证 码 则 与 session 对 象 的 验证 码 信 息 比 对 验证 。 全 部 验证 
正确 , 则 跳 转 到 welcome. jsp; 否则 , 跳 转 到 loginfail. jsp. 

ImageServlet. java 参考 代码 如 下 : 


package serv1et; 

import java. awt. Color; 

import java.awt.Font; 

import java. awt. Graphics; 

import java. awt. image. BufferedImage; 

import java. io. IOException; 

import java. util. Random; 

import javax. imageio. ImageIO; 

import javax. servlet. ServletException; 

import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import javax. servlet. http. HttpSession; 


public class ImageServlet extends HttpServlet { 
public ImageServlet() { 
super(); 
) 
(QOverride 
public void destroy() ( 
super. destroy(); 
} 
@Override 


public void doGet(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
response. setContentType("text/html;charset = utf – 8"); 
int width = 78; 
int height = 20; 
// 创 建 对 象 


BufferedImage bim = new BufferedImage(68, 20, BufferedImage. TYPE INT RGB); 
/ * 获取 图 片 对 象 bim 的 图 形 上 下 文 对象 g, 这 个 g 的 功能 如 同一 支 绘图 笔 ,程序 中 使 用 这 支 


笔 来 绘制 .修改 图 片 对 象 bim* / 
Graphics g = bim. getGraphics(); 
Random rm = new Random( ) ; 
g. setColor(new Color(rm.nextInt(100),205,rm.nextInt(100))); 
g.fillRect(0, 0, width, height); 
StringBuffer sbf = new StringBuffer(""); 
// 输 出 数字 
for(int i=0;i<4;i++)( 
g. setColor(Color. black); 
g. setFont(new Font(" 4E X 3t š", Font. BOLD| Font. ITALIC, 22) ) ; 
int n= rm.nextInt(10); 
sbf. append(n) ; 
g.drawString("" +n, i* 15 * 5, 18); 
) 
// 生 成 的 验证 码 保 存 到 session 中 
HttpSession session = request. getSession(true); 
session.setAttribute("piccode", sbf); 
// 禁 止 缓存 
response. ѕеЕНеайег ("Ргапа", "no - cache"); 
response. setHeader ("Coche - Control", "по - cache"); 
response. setDateHeader( "Expires", 0); 
response. setContentType( " image/jpeg"); 
// 将 bim [8 Fr VA JPG 格式 返回 给 浏览 器 。 
ImageI0. write(bim, "JPG", response. getOutputStream( ) ) 
response. getOutputStrean().close(); 
) 
(QOverride 


public void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException ( 
doGet(request, response); 
) 
@Override 
public void init() throws ServletException { 
} 
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} 
该 Servlet 在 web. xml 文件 中 的 注册 信息 如 下 : 


<servlet> 

< servlet - name > InageServlet </servlet — name > 

< servlet - class > servlet. ImageServlet «/servlet - class > 
</servlet > 
< servlet - mapping > 

< servlet - name > ImageServ1et «/servlet – name > 

< url- pattern >/ImageServlet «/url - pattern» 
«/servlet - mapping > 


LogimgServlet. java 参考 代码 如 下 : 


package servlet; 
import java. io. IOException; 
import java. io.PrintWriter; 
import java. sql. Connection; 
import java. sql. ResultSet; 
import java. sql. SQLException; 
import java. sql. Statement; 
import javax. servlet. ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import javax. servlet. http. HttpSession; 
import bean. DBcon; 
public class LogimgServlet extends HttpServlet { 
public LogimgServlet() { 
ѕирег(); 
) 
public void destroy() ( 
super. destroy(); 
) 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
request. setCharacterEncoding("utf - 8"); // 解 决 post 提交 的 中 文 乱码 
response. setContentType( " text/html;charset = gbk"); 
PrintWriter out = response.getWriter(); 
String checkcode = request. getParameter("checkcode" ) ; 
String piccode - request. getSession().getAttribute("piccode").toString(); 
String userName = request.getParameter("userName"); // 
String passWord = request. getParameter("passWord"); 
// 用 户 登录 信息 存 人 session 
request. getSession ( ). setAttribute ( " logInfo", userName + ";" + passWord +"; 
checkcode + ";" + piccode); // 
String sql = "select * from userinfo"; // 
sql+= " 
Connection con = DBcon. getConnction(); 
Statement stmt; 
ResultSet rs; 


where loginname = '" + userName + "' and password = '" + passWord + "'"; 


stmt = con.createStatement(); 
rs = stmt.executeQuery(sql); 
if (rs.next()&(checkcode. equals(piccode) ) ){ // 登 录 信 息 完全 正确 
request.getSession().setAttribute("userName", userName) ; 
response. sendRedirect(". /ch07 /welcone. jsp") ; 
} 
else { // 登 录 信 息 有 误 
response. sendRedirect(". /ch07/1ogfail. jsp"); 
) 
) catch (SQLException e) ( 
// TODO Auto - generated catch block 
e. printStackTrace(); 


) 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


doGet (request, response) ; 
) 
public void init() throws ServletException ( 
i 


) 


下 面 的 log. jsp 程序 ,是 在 用 户 登录 页 面 中 增加 了 调用 ImageServlet 生成 验证 码 功能 ， 
用 户 输入 的 验证 码 和 程序 生成 的 验证 码 均 转交 给 LogimgServlet 进行 判断 处 理 。 注 意 。 该 
页 面 采 用 “二 base href = " < % = basePath % 二 "二 ”指定 页 面相 对 基准 地 址 ,页 面 中 调用 
ImageServlet 就 是 以 basePath 为 基准 的 。 

log. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "gbk" % > 
<% 
String path = request.getContextPath(); 
String basePath = request. getScheme() + "://" + request. getServerName() + ":" + 
request. getServerPort() + path + "/"; 
> 
<html> 
< script type = "text/javascript"> 
function reloadImage(t)( t.src = "./ImageServlet?flag = " + Math. random( ) ; 
) 
«/script» 
<head> «base href = "< $ = basePath $ >"> </head> 
<body> <center> 
«form action= "./LogimgServlet" method = "post"> 
«table» 
<tr><td colspan- "2" align = "center"> 用 户 登 录 </td></tr> 
<tr><td> 登 录 名 :</td><td>< input type = "text" name = "userName"></td></tr> 
<tr><td> 密 — 码 :</td>< td»« input type = "password" name = "passWord"> </td></tr> 
<tr><td> 验 证 码 </td> 
<td>< input type = "text" name = "сһесксойе"> 
< ing src = ". /ImageServlet" align = "middle" alt = "看 不 清 , 点 击 这 里 !" + src 


Servlet Ж а 15 


M ~ ж 


JSP Web ER X AA B viste 


опс11сК = "reloadImage(this)"></td></tr> 
< tr><td colspan = "2" align = "center">< input type = "submit" value = "登录 "></td></tr> 
</table> 
</form></center> 
</body> 
</htm1 > 


welcom. jsp 与 实验 7. 1 相同 ,这 里 从 略 。 
logfail. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<html> 
<head> 
«title» logfail. jsp </title> 
</head> 
< body> 
<% 
request. setCharacterEncoding( "utf – 8"); 
String logInfo = (String)session.getAttribute("logInfo"); 
$> 
登录 失败 ! 登 录 信 息 : <% = logInfo%><p> 
单 击 <a href = "log. jsp"> 这 里 </a> 返 回 , 重 新 登录 ! 
</body> 
</htn1 > 


(4) 程序 测试 ,效果 如 图 7-4 所 示 。 


# E SRM 下 午 好 ! 今 天 是 : 星期 五 
验证 т BE admin， 恭 喜 你 ， 登 录 成 功 ! 
-| 


图 7-4 Servlet 生成 验证 码 的 用 户 登录 效果 


实验 7.4 文件 上 传 


【实验 任务 】 


利用 Apache 公司 的 commons-fileupload. jar 接收 浏览 器 上 传 的 文件 .实现 文件 上 传 。 

浏览 器 端 已 经 提供 了 对 文件 上 传 功能 的 支持 ,只 要 将 表单 的 enctype 属性 设置 为 
multipart/form-data 即 可 ; 在 Web 服务 器 端 如 何 获 取 浏览 器 上 传 的 文件 ,需要 进行 复杂 的 
编程 处 理 。 为 了 简化 文件 上 传 应 用 开发 ,一 些 公 司 和 组 织 专门 开发 了 文件 上 传 组 件 。 本 实 


验 采 用 Apache 公司 的 commons-fileupload. jar 接收 浏览 器 上 传 的 文件 ,实现 文件 上 传 。 
该 组 件 由 多 个 类 共同 组 成 ,使 用 该 组 件 来 实现 文件 上 传 功能 的 应 用 开发 只 需要 了 解 和 
使 用 其 中 的 3 个 类 : DiskFileUpload,Fileltem 和 FileUploadException 。 


【实验 步骤 】 


(1) 将 commons-fileupload-1. 3. jar, commons-io-1. 4. jar, cos. jar 复制 到 WebRoot\ 
WEB-INFMibVrP, fE d 盘 新 建文 件 夹 upfile, 上 传 的 文件 将 保存 在 d:\upfile 文件 中 。 

(2) 设计 一 个 Servlet(FileUploadServlet. java) 类 接收 浏览 器 传 来 的 文件 ,并 保存 到 服 
务 器 上 指定 的 文件 夹 中 。 

(3) 设计 一 个 fileupload. jsp, 用 于 用 户 通 过 浏览 器 选择 要 上 传 到 服务 器 的 文件 。 

(4) 设计 一 个 fileupload_list. jsp, 用 于 显示 文件 上 传 结果 。 

FileUploadServlet. java 参考 代码 如 下 : 


package servlet; 
import java. io.File; 
import java. io. IOException; 
import java. io. PrintWriter; 
import java. util. Iterator; 
import java. util. List; 
import javax. servlet. ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import org. apache. commons. f ileupload. DiskFileUpload; 
import org. apache. commons. f ileupload.FileItem; 
import org. apache. commons. f ileupload. FileUploadException; 
public class FileUploadServlet extends HttpServlet ( 
public FileUploadServlet() ( 
super();) 
public void destroy() ( 
super.destroy(); ) 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
response. setContentType( " text/html;charset = utf - 8"); 
PrintWriter out - response.getWriter(); 
// 设 置 保存 上 传 文件 的 目录 
String uploadDir = "d:/upfile"; // 文 件 上 传 后 的 保存 路 径 
out.println(" 上 传 文件 存储 目录 :" + uploadDir); 
File fUploadDir = new File(uploadDir); 
if(!fUploadDir. exists()){ 
if(!fUploadDir. mkdir()){ 
out. println(" 无 法 创建 存储 目录 d: /upfile!"); 


return; 
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) 
if (!DiskFileUpload. isMultipartContent(request))( 
out. println(" H fi 4b ZB multipart/form- data 类 型 的 数据 !"); 
return; 
) 
DiskFileUpload fu = new DiskFileUpload(); 
fu. setSizeMax(1024 * 1024 * 200); // 最 多 上 传 200MB 数据 
fu. setSizeThresho1d(1024 * 1024) ; // 超 过 1MB 的 数据 采用 临时 文件 缓存 
//fu. setRepositoryPath(...); // 设 置 临时 文件 存储 位 置 (如 不 设置 , 则 采用 默认 位 置 ) 
fu. setHeaderEncoding("utf - 8"); // 设 置 上 传 的 文件 字段 的 文件 名 所 用 的 字符 集 编码 
List fileItems = null; // 创 建文 件 集合 ,用 于 保存 浏览 器 表单 传 来 的 文件 
try { 
fileItems = fu.parseRequest(request); ) 
catch(FileUploadException e) 
{ 
out. println(" 解 析 数据 时 出 现 如 下 问题 : "); 
e. printStackTrace(out) ; 


return; } 
Иа 3 3s 109836 1 EEG P ЙО СЕ , RARR aE 
Iterator it = fileItems. iterator(); // 创 建 迭代 器 对 象 it 


while (it.hasNext()) 
{ 
Fileltem fitem = (FileItem) it.next();  // 由 迭代 器 取出 文件 项 
if (!fitem.isFormField()) // 忽 略 其 他 不 属于 文件 域 的 那些 表单 信息 
try( String pathSrc = fitem.getName(); 

// 文 件 名 为 空 的 文件 项 不 处 理 
if(pathSrc.trim().equals(""))continue; 

// 确 定 最 后 的 "\" 位 置 ,以 此 获取 不 含 路 径 的 文件 名 
int start = pathSrc.lastIndexOf('NN'); 

// 获 取 不 含 路 径 的 文件 名 
String fileName = pathSrc. substring(start + 1); 
File pathDest = new File(uploadDir, fileName); // 构 建 目标 文件 对 象 
fitem. write(pathDest); // 将 文件 保存 到 服务 器 上 

) 

catch (Exception e) 
{ out.println(" 存 储 文件 时 出 现 如 下 问题 : "); 
e. printStackTrace(out) ; 
return; } 
finally // 总 是 立即 删除 保存 表单 字段 内 容 的 临时 文件 
{ fitem. delete(); } 
) 
response. sendRedirect(". /ch07/fileupload list. jsp"); 
) 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException( 


обе (request, response) ; 
} 
public void init() throws ServletException { 
} 
1 
/ * fileupload. jsp * / 
<% @ page language = "java" % > 
<% @ page contentType = "text/html;charset = utf - 8" %> 
<html> 
<head><title> 文 件 上 传 </title></head> 
< body bgcolor = " # FFFFFF" text =" # 000000" leftmargin = "0" topmargin = "40" 
marginwidth = "0" marginheight = "0"> 
<center >< hl > 文件 上 传 </hl > 
< form name = " uploadform" method = " POST" action = "../FileUploadServlet" ENCTYPE 


"multipart/form- data"> 
< table border = " 3" width = "450" cellpadding = "4" cellspacing = "2" bordercolor 
" # 9BD7FF"> 
«tr» «td colspan- "2"> 
文件 1: < input type = "file" папе = "filel" size- "40"»«/td»«/tr» 


«tr» «td colspan = "2"> 
文件 2: < input type = "file" name = "file2" size= "40"></td></tr> 
<tr><td colspan= "2"> 
文件 3: < input type = "file" папе = "file3" size= "40"></td></tr> 
</table><br><br> 
<table > 
<tr><td align = "center"> 
< input type = "submit" name = "submit" value = "开始 上 传 "/></td></tr> 
</table> 
«/£orn »«/center > 

</body> 
</html> 
/ * fileupload list. jsp * / 
<% @ page contentType = "text/html; charset = utf - 8" import = "java. io. * " %> 
<html> 
<head> <title> 文 件 目录 </title></head> 
<body> 
< font size = 4 color = red> 已 上 传 的 文件 目录 列表 </font ><br> 
< font size = 5 color = blue > 
<% 

String path = "d:/upfile"; 

File fl = new File(path); 

File filelist[] = fl.listFiles(); 

out. println(" 服 务 器 上 上 传 文件 的 保存 路 径 : "+ path + "c br» «br»"); 

for(int i=0; i< filelist.length; i++) 

{ 
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out.println((i-* 1) + ":" + filelist[i].getName() + "&nbsp;&nbsp;« br >"); 
// 如 果 是 图 片 文件 ,可 用 以 下 语句 显示 图 片 。 
//out. println("« img src = images\\" + filelist[i].getName() + "><br><br>"); 
} 
%> 
</body> 
</htm1> 


程序 运行 效果 如 图 7-5 所 示 。 
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已 上 传 的 文件 目录 列表 
服务 器 上 上 传 文件 的 保存 路 径 : dyupfile 
1:Java 学 习 技 巧 .doc 
2:JDBC 连 接 数 据 库 大 全 .txt 

3: 基 于 J2EE 的 Ajax 宝典 .pdf 


图 7-5 Servlet 处 理 客户 上 传 的 文件 


第 8 = 过 滤 器 


过 滤器 (Filter) 是 Servlet 技术 中 比较 重要 的 技术 ,Web 开发 人 员 通 过 Filter 技术 ,对 
Web 服务 器 管理 的 所 有 Web 资源 (如 JSP, Servlet, HTML 及 其 他 资源 文件 ) 进 行 拦 截 ,从 
而 实现 一 些 特殊 的 功能 。 例 如 ,统一 处 理 中 文 参 数 传递 乱码 .实现 URL 级 别 的 权限 访问 控 
制 、. 过 滤 敏 感 词汇 `. 压 缩 响应 信息 等 。 


【实验 目的 】 


(1) 了 解 过 滤器 的 作用 。 
(2) 掌握 过 滤器 的 开发 与 部 署 的 步骤 。 
(3) 了 解 过 滤器 链 。 


实验 8.1 处 理 中 文 乱码 的 过 滤器 


【实验 任务 】 
编写 登录 表单 处 理 程序 ,引入 过 滤器 ,统一 处 理 所 有 请 求 编码 ,解决 中 文 乱码 问题 。 
【实验 原理 】 


过 滤器 是 Web 服务 器 上 的 组 件 , 对 客户 和 资源 之 间 的 请 求 和 响应 进行 过 滤 。 过 滤器 的 
工作 原理 是 : 当 Servlet 容器 接收 到 对 某 个 资源 的 请 求 , 它 要 检查 是 否 有 过 滤器 与 之 关联 。 
如 果 有 过 滤器 与 该 资源 关联 ,Servlet 容器 将 把 该 请 求 发 送 给 过 滤器 。 在 过 滤器 处 理 完 请 求 
后 , 它 将 做 3 件 事 : 产生 响应 并 将 其 返回 给 客户 ; 如 果 有 过 滤器 链 , 将 (修改 过 或 没有 修改 
过 ) 请 求 传递 给 下 一 个 过 滤器 ; 将 请 求 传递 给 不 同 的 资源 。 当 请 求 返回 到 客户 时 , 它 是 以 相 
反 的 方向 经 过 同一 组 过 滤器 返回 。 过 滤器 链 中 的 每 个 过 滤器 也 可 能 修改 响应 。 过 滤器 API 
主要 包括 Filter、FilterConfig 和 FilterChain 接口 。 


【实验 步骤 】 


(1) 编写 一 个 用 户 请 求 表 单 页 面 loginform. html, 供 用 户 提 供 表 单 向 服务 器 传递 请 求 
参数 。 
loginform. html 参考 代码 如 下 : 


<html> 
<head> 


JSP Web # K X Am B viste 


<title> 使 用 过 滤器 改变 请 求 编码 </title> 
< meta http - equiv = "Content - Type" content = "text/html;charset = utf – 8"> 
</head> 
<body>< center >< h2 > 
请 输入 用 户 名 和 口令 : </h2 > 
< form method = "post" action = "../CheckParamServlet"> 
<table> 
<tr><td> 用 户 名 : </td> 
< td>< input name = "name" type = "text"»«/td»«/tr» 
<tr><td>H $: </td> 
< td>< input name = "pass" type = "password"></td>< tr» 
«td»«/td» 
< td»« input name = "ok" type = "submit" value = "提交 "> 
< input name = "cancel" type = "reset" value = " 重 置 "></td></tr> 
</table> 
</form> 
</center> 
</body> 
</html> 


(2) 编写 处 理 请 求 参数 的 Servlet(CheckParamServlet. java) ,处 理 用 户 表单 请 求 参数 。 
参考 代码 如 下 : 


/ * CheckParamServlet. Java * / 

package servlet; 

import java. io. * ; 

import javax. servlet. * ; 

import javax. servlet. http. * ; 

public class CheckParamServlet extends HttpServlet ( 

public void doGet(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException { 

String name = request. getParameter("name"); 
String pass = request. getParameter("pass"); 
response. setContentType(" text/html;charset = utf – 8"); 
PrintWriter out = response.getWriter(); 
out. println("« html >< head >< title» Param Test «/title»«/head»"); 
out. println("« h3 align = center > 你 的 用 户 名 为 : " + name + "«/h3»"); 
out. println("« h3 align = center > 你 的 口令 为 : " + pass + "«/h3»"); 
out. println("«/body » «/htnl >"); 

} 

public void doPost(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException { 

doGet (request, response); 

I 

I 


(3) 修改 web. xml 文件 ,加 入 下 面 代码 (可 由 Servlet 向 导 自 动 完 成 ,注意 Servlet 的 
URL 设置 ) : 


< servlet > 
< servlet - name > CheckParamServlet </servlet - name > 


< servlet - class > servlet. CheckParamServlet «/servlet - class > 
</servlet > 
< servlet - mapping > 

< servlet - name > CheckParamServlet </servlet - name > 

< url - pattern >/CheckParamServlet </ur1 - pattern» 
«/servlet - mapping» 


(4) 在 浏览 器 的 地 址 栏 中 输入 URL: http://localhost: 8080/jspsx/ch08/loginform. 


html, 输 入 用 户 名 和 口令 ,然后 单 击 “ 提 交 ” 按 钮 ,经 CheckParamServlet 处 理 后 返回 结果 ,如 
图 8-1 所 示 。 
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你 的 用 户 名 为 : (її áo èl” 
你 的 口令 为 : 12345678 


图 8-1 读 取 request 参数 时 没有 指定 编码 会 出 现 中 文 乱码 


可 以 看 到 从 服务 器 返回 的 汉字 乱码 ,原因 是 没有 指定 request 的 编码 。 

(5) 编写 一 个 过 滤器 EncodingFilter. java. 改变 请 求 编码 ,统一 处 理 请 求 参数 中 文 
编码 。 

系统 中 是 否 启用 过 滤器 可 通过 web. xml 配置 文件 控制 ,实验 时 ,注意 观察 过 滤器 启用 
和 关闭 两 种 情形 的 效果 (不 用 过 滤器 时 会 产生 中 文 乱码 ) 。 


/ * EncodingFilter. java * / 
package filter; 
java. io. IOException; 
import javax.servlet. * ; 
public class EncodingFilter implements Filter { 
protected String encoding = null; 
protected FilterConfig config; 
public void init(FilterConfig filterConfig) throws ServletException ( 
this.config - filterConfig; // 得 到 在 web. xml 中 配置 的 编码 
this. encoding = filterConfig.getInitParameter("Encoding"); 
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
if (request.getCharacterEncoding() == null) {  // 得 到 指定 的 编码 
String encode = getEncoding(); 
if (encode != null) { // 设 置 request 的 编码 
request. setCharacterEncoding(encode); 
response. setCharacterEncoding(encode); 
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} 
chain. doFilter(request, response); 
) 
protected String getEncoding() ( 
return encoding; 
) 
public void destroy() ( 
} 
} 


(6) 在 web. xml 文件 中 配置 过 滤器 ,加 入 编码 参数 utf-8, 代 码 如 下 : 


«filter» 
< filter - name > EncodingFilter «/filter - name > 
< filter - class» filter. EncodingFilter «/filter - class > 
< init - param > 
< param – name > Encoding </param - name > 
< param - value > utf — 8 </param - value > 
«/init- param» 
«/filter» 
< filter - mapping» 
< filter - name > EncodingFilter «/filter- name > 
« url- pattern»/ * «/url- pattern» 
«/filter- mapping» 


(7) 重复 步 又 (3) ,在 浏览 器 的 地 址 栏 中 输入 URL ,结果 如 图 8-2 所 示 。 


БАЕ ШАА ВЗ - Tindows Internet ixi 


бөс http://localhost 8080/jspsx/CheckPar anServlet z] 


XPD MAD FEV BARW ТАФ HW 


你 的 用 户 名 为 : Hh 
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图 8-2 过 滤器 设置 request 编码 ,统一 解决 中 文 乱码 问题 


实验 8.2 过 滤器 限制 IP 用 户 


【实验 任务 】 


设计 一 个 IP 地 址 过 滤器 ,只 有 在 指定 范围 的 IP 地址 才 可 以 登录 ,而 不 在 此 范围 的 IP 
地 址 则 拒绝 登录 。 

过 滤器 程序 设计 思路 : 可 以 将 起 始 IP 地 址 和 终止 IP 地 址 写 在 web. xml 配置 文件 中 ， 
本 实验 为 方便 将 读 取 到 的 起 止 IP 地 址 存放 到 request 对 象 中 ,以 便 比 对 过 滤 结 果 , 将 从 
web. xml 中 读 取 起 止 IP 地 址 的 语句 安排 在 过 滤器 的 doFilter() 方 法 中 。 实 际 项 目 一 般 是 
在 过 滤器 的 init() 方 法 中 读 取 这 些 配置 信息 。 当 有 客户 请 求 资 源 时 ,首先 获取 客户 的 IP 地 


址 ,并 将 客户 的 IP 与 读 取 配 置 文件 的 IP 地 址 作 比较 ,如 果 客 户 TP 在 有 效 范 围 内 , 则 允许 登 
录 , 和 否则 拒绝 登录 。 


【实验 步骤 】 
CD 编写 IP 地 址 过 滤器 FilterIP. java, J} Æ web. xml 中 进行 配置 。 


/ * FilterIP. java * / 

package filter; 

import java. io. IOException; 

import javax. servlet. Filter; 

import javax. servlet. FilterChain; 

import javax. servlet. FilterConfig; 

import javax. servlet.ServletException; 

import javax. servlet.ServletRequest; 

import javax. servlet.ServletResponse; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
public class FilterIP implements Filter { 
private FilterConfig filterConfig; 


private int startIp; // 起 始 IP 地 址 
private int endIp; // 结 束 IP 地 址 
public void destroy() { 

) 


public void doFilter(ServletRequest arg0，ServletResponse argl, 
FilterChain arg2) throws IOException, ServletException ( 
// 将 ServletRequest 转换 为 HttpServletRequest 
HttpServletRequest request = (HttpServletRequest) arg0; 
// 将 ServletResponse 转换 为 HttpServletResponse 
HttpServletResponse response = (HttpServletResponse) argl; 
// 从 web. xnl 中 读 取 初始 化 参数 startIP 
String strstartlp = filterConfig.getInitParameter("startIp"); 
// 从 web. xml 中 读 取 初始 化 参数 endIP 
String strendIp = filterConfig.getInitParameter("endIp"); 
request. setAttribute("strstartIp", strstartIp); 
request. setAttribute("strendIp", strendIp); 
// 将 起 始 IP Jb hb rh ig" "去 掉 ,再 转 为 整 型 量 ,如 127.0.0.1 Æ 127001 
startIp = Integer.parseInt(strstartIp.replace(".", "")); 
endIp = Integer. parseInt(strendIp. replace(".", "")); 
String reqIP = request. getRemoteHost();// 获 取 客 户 端的 IP 地 址 
request. setAttribute("reqIP",reqIP); 
reqIP = regIP. replace(".", ""); // 将 IP Bib rp ЙО". "去 掉 , 如 127.0. 0.1 变 为 127001 
//request. getRequestDispatcher(" /ch08/filtIp.jsp").forward(request, response); 
//request. getRequestDispatcher("error. jsp"). forward(request, response); 
int ip = Integer.parseInt(reqIP); // 将 字符 串 转 为 int 型 数据 
// 如 果 用 户 的 IP 不 在 允许 范围 内 则 转发 到 error. jsp 页 面 
if(ip< startIp || ip> endIp) { 
request. getRequestDispatcher("/ch09/filtIp. jsp"). forward(request, response); 


} 
System. out. println(" 这 是 对 request 的 过 滤 "); 
arg2. doFilter(arg0, argl); // 调 用 下 一 个 FILTER 或 调用 资源 
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System. out. println(" 这 是 对 response ff] E iE") ; 

) 

public void init(FilterConfig arg0) throws ServletException { 
this.filterConfig = arg0; 

} 

} 


在 init() 方 法 中 ,FilterConfig 对 象 的 getInitParameter() 方 法 可 以 一 次 读 取 web. xml 
文件 中 的 配置 信息 ,利用 request 对 象 的 getRemoteHost() 方 法 可 以 获取 客户 端的 IP 地 址 ， 
将 客户 端的 IP 地 址 与 配置 文件 中 的 IP 地 址 范围 比较 ,就 可 以 实现 对 登录 用 户 的 控制 。 

(2) 在 web. xml 中 要 对 过 滤器 进行 配置 ,配置 代码 如 下 : 


«filter» 
< filter - name» filterIp </filter - name» 
< filter - class» filter.FilterIP «/filter - class > 
< init - param > 
< param - name > startIp </param - name > 
< param - value» 127. 0. 0. 2 «/param - value > 
«/init - param > 
< init - param > 
< param - name > endIp </param - name > 
< param - value» 127. 0. 0. 5 </param - value > 
</init - param» 
</filter> 
< filter - mapping > 
< filter - name» filterIp</filter- name > 
< url - pattern »/ * «/url- pattern» 
«/filter- mapping» 


ХЕ E iii ЙО BC EP. < filter > Ж BOR Y pue IP 地 址 的 过 滤器 ,过 滤器 的 名 字 是 
filterIp ,实现 类 的 完整 类 名 是 filter. FilterIp ,其 中 的 二 initrparam 二 子 元 素 定 义 两 个 初始 化 
参数 starpIp 和 endIp ,分 别 表示 IP 的 起 始 地 址 和 终止 地 址 ; < filter-mapping — 26 XX 4E XC 
filterIP 过 滤器 对 哪些 资源 的 访问 进行 过 滤 ,这 里 设置 为 /* ,表示 对 所 有 资源 都 要 过 滤 。 在 
WebRoot\ch09\ 文 件 夹 下 建立 一 个 JSP 文件 filtIp.jsp。 访 问 Web 服务 下 的 任何 一 个 资源 ， 
这 个 过 滤器 都 会 起 作用 。 

(3) 编写 用 户 测试 程序 filtIp. jsp。 运 行 时 ,根据 web. xml 中 过 滤器 起 止 地 址 变换 客户 
计算 机 的 IP 地 址 ,观察 过 滤 效 果 。 


/ * WebRoot/ch08/filtIp. jsp * / 
<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<html> 
<head> 
<title> 显 示 过 滤器 拦截 结果 </title> 
</head> 
<body> 
对 不 起 ,你 的 IP 地 址 是 : <% = request.getAttribute("reqIP") %><br> 
不 在 服务 范围 内 !< hr > 
web. xnl 设置 的 合法 地 址 范围 是 : < br > 
xnl 设置 的 startIp=<% = request.getAttribute("strstartIp") %><br> 


xml 设置 的 endIp = < % = request.gethttribute("strendIp") %><br> 
</body> 
</html> 
(4) 在 浏览 器 地 址 栏 中 输入 地 址 http://localhost :8080/jspsx/index. jsp, 可 看 到 过 滤 
器 已 起 作用 ,如 图 8-3 所 示 。 


明示 过 小 器 拦截 结果 - Windows Internet lU 


go- [ES http: //localhost:8080/ jspsx/index. jsp z| http://1ecalboxt:0000/ jxpxs/indax. jsp 

XED ARO SEW 收藏 天 Ci TAW 958 > 对 不 起 ， 你 的 了 地 址 是 ，127001 

到 || 不 在 服务 范围 内 ! 

对 不 起 ， 你 的 人 P 地 址 是 : 127.0.0.1 ЕЕ 
Зы 合法 地 址 范围 是 ， 

不 在 服务 范围 内 ! ха Bota 127 002 ы 


xmi Ё #Чепйїр=127.0.0.5 
web.xml 设 置 的 合法 地 址 范围 是 : 


xml 设 置 的 starttp=127.0.0.2 EEE 
S |toncatBServer te Java cat; ;Mrogran 
xml 设 置 的 endIp=127.0.0.5 避 这 是 对 request 的 过 小 


ГГ oe a | 这 是 对 cesponse 的 过 小 
图 8-3 使 用 过 滤器 控制 登录 用 户 的 IP 地 址 可 访问 范围 


从 实验 可 见 ,来 自 本 机 请 求 的 IP 地 址 是 127. 0. 0. 1 ,而 web. xml 配置 文件 中 的 可 访问 
起 止 地 址 是 127. 0. 0.2 一 127. 0.0.5, 客 户 的 IP 地 址 不 在 允许 范围 内 ,请 求 被 过 滤器 拦截 ， 
被 转发 到 了 filtIp. jsp 页 面 ,不 能 到 达 请 求 资源 index. jsp 页 面 。 

为 了 调试 程序 时 能 够 在 控制 台 上 显示 Filter. java 中 的 System. out. println() 语 句 的 输 
出 内 容 ,必须 在 MyEclipse 工具 栏 上 开启 Tomcat, 再 在 MyEclipse 工具 栏 上 开启 内 置 浏 览 
器 ,在 地 址 栏 中 输入 地 址 http://localhost:8080Vjspsx/ch08VfiltIp. jsp, 则 出 现 运行 结果 ,其 
中 ,控制 台 上 输出 了 过 滤器 过 滤 作 用 前 后 的 输出 信息 ,输出 信息 表明 ,过 滤器 可 以 在 请 求 对 
象 (request) 到 达 资 源 之 前 进行 过 滤 处 理 ,也 可 以 对 服务 器 输出 的 响应 对 象 (response) 进 行 

如 果 改 变 web. xml 文件 中 的 startlp 的 值 为 127. 0. 0.0, 重 启 Tomcat 服务 器 ,访问 与 
上 面 同样 的 网 址 , 则 可 以 请 求 index. jsp 页 面 。 这 是 因为 请 求 的 IP 地 址 在 允许 范围 内 。 


实验 8.3 ”过 滤器 强制 用 户 登 录 


本 实验 是 本 书 教材 (JSP Web 技术 及 应 用 ) 中 提供 的 网 上 书店 实例 项 目 中 一 个 实用 的 
过 滤器 (对 应 教材 例 8-2) 。 


【实验 任务 】 


设计 一 个 过 滤器 ,该 过 滤器 有 两 个 功能 ,一 是 在 web. xml 配置 过 滤器 时 通过 参数 
encoding 指明 使 用 何 种 字符 集 编码 来 获取 请 求 对象 的 参数 ,以 便 对 所 有 请 求 统一 处 理 表单 
参数 的 中 文 问题 ; 二 是 不 允许 未 经 登录 的 用 户 访问 站 点 中 的 其 他 任何 资源 。 

实现 强制 用 户 登 录 这 一 功能 的 原理 是 在 过 滤器 中 检查 session 对 象 中 是 否 保存 有 用 户 
名 以 便 判 断 用 户 是 否 已 登录 ,如 果 未 经 登录 而 直接 访问 站 点 下 的 任何 其 他 资源 ,都 会 强制 返 
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回 登录 页 面 index. html. 


【实验 步骤 】 


(1) 在 filter 包 中 创建 过 滤器 filter. CharacterEncodingFilter. java. Jf YE web. xml 进行 
配置 。 

(2) 在 WebRoot 下 设计 登录 页 面 login. html。 登 录 表 单 信息 将 提交 到 /ch08/ 
checkUser. jsp 文件 。 

(3) 在 WebRoot 下 ch08 文件 夹 中 设计 checkUser. jsp。 该 JSP 获取 登录 用 户 名 ,并 存 
入 session。 

(4) 在 ch08 中 编写 一 个 简单 的 main. jsp 页 面 ,checkUser. jsp 用 户 名 处 理 完毕 后 转 该 
页 面 。 

Filter. CharacterEncodingFilter. java 参考 代码 如 下 : 


package filter; 
import java. io. IOException; 
import javax. servlet. Filter; 
import javax. servlet. FilterChain; 
import javax. servlet. FilterConfig; 
import javax. servlet. ServletException; 
import javax. servlet. ServletRequest; 
import javax. servlet. ServletResponse; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
public class CharacterEncodingFilter implements Filter { 
public void destroy() { 
) 
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException ( 
request. setCharacterEncoding("utf – 8"); // 设 置 获取 请 求 参 数 时 所 使 用 的 编码 集合 
HttpServletRequest req = (HttpServletRequest) request; 
HttpServletResponse res = (HttpServletResponse) response; 
String basePath = req.getScheme() + "://" + req. getServerName() + ":" + req. getServerPort() + 
req.getContextPath() * "/"; // 获 得 项 目 基准 路 径 
String url = req.getRequestURL().toString(); //М request 对 象 中 获取 访问 资源 URL 
String str = (String) req.getSession().getAttribute("userName");//)A session 中 取得 用 户 名 
// 下 列 4 行 ,调试 时 使 用 , 主要 是 观察 URL, 以 便 保证 逻辑 判断 无 误 
System. out. println("1basePath = " + basePath); 
System. out. println("2 url = " + basePath + "ch08/checkUser. jsp"); 
System. out. println("3url =" + url); 
System. out. println("4str =" + str); 
// 强 制 登录 逻辑 判断 ,如 果 已 登录 (session 中 已 有 用 户 名 ) 或 访问 登录 页 面 及 验证 页 面 均 可 放行 
// 如 果 已 登录 或 请 求 的 是 登录 相关 资源 , 则 放行 ; 否则 , 转 登录 页 面 

if (str != null 

| | url. equals(basePath + "login. html") 

//|| url. equals(basePath + " ing/top. jpg") 

| | url. equals(basePath + "ch08/checkUser. jsp") 

)( 


chain. doFilter(request, response); 
) else ( 
/* 过 滤器 的 相对 基准 地 址 与 用 户 请 求 的 URL 一 致 ,注意 ,这 里 用 的 是 项 目 根 路 径 "/"; 
* 这 样 适用 于 来 自如 何 路 径 的 请 求 , 否则 ,有 些 请 求 不 能 转 到 登录 页 面 * / 
res. sendRedirect("/jspsx/login. html"); 


) 
) 
public void init(FilterConfig arg0) throws ServletException { 
) 
} 


在 web. xml 中 要 对 过 滤器 进行 配置 ,配置 代码 如 下 : 


«filter» 
< filter- папе > character «/filter - name > 
< filter - class > filter.CharacterEncodingFilter «/filter - class > 
«/filter» 
< filter - mapping > 
< filter - name > character </filter - name > 
< url- pattern >/ * </url - pattern» 
</filter- mapping» 


checkUser. jsp 参考 代码 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = gb2312" %> 
<html> 

<head> 

< title» checkUser. jsp </title> 

</head> 

<body> 

<% 


request. setCharacterEncoding( "gb2312");// 解 决 login. html 中 表单 post 方式 提交 的 中 文 乱码 


String name = request. getParameter("loginName"); 
System. out. println("checkuser. jsp name = " + name) ; 
session.setAttribute("userName",name); // 将 用 户 名 保存 到 session 中 


response. sendRedirect("main. jsp"); // 转 主页 面 。 此 时 ,已 登录 成 功 , 可 实现 任意 跳 转 


第 > 
</body> 
«/htnl > 


WebRoot/login. html 参考 代码 如 下 : 


<html> 
<head> 
< title» login. html </title> 
</head> 
< body> 
< table align = "center"> 
<tr><td align= "center">< p> 
< font color = "red" size="3" style="font- family:simhei"> 请 登录 : </font >< p> 
< form method = "post" action = ". /ch08/checkUser. jsp" target = "_blank">< p> 
用 户 名 :< input type = "text" name = "loginName" size = "20"><p> 


过 滤器 
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密码 :<input type = "password" name = "passWord" size = "20"><р> 
< input type = "submit" value = "提交 "> 
< input type = "reset" value = " 重 置 "> 
</form></td></tr> 
</table> 
</body> 
</html> 


main. jsp 参考 代码 如 下 : 


<% (à page language = "java" pageEncoding = "utf 一 8" %> 
<html> 

<head> 

« title» main. jsp </title> 
</head> 
< body> 
恭喜 你 ,登录 成 功 ! <br> 

</body> 

</htm1> 


(5) 测试 ,在 地 址 栏 输入 任意 URL, 如 输入 http: //localhost:8080/jspsx/index. jsp, АЙ 
察 运 行 效果 ,如 图 8-4 所 示 。 


Q MyEclipse Feb Browser 22 


Wm. 
яе — — Jess | [5 
g ppo BEM жой! 
LT н [гыча 


向 checkuser 
过 滤器 的 输 


checkuser. jsp 页 面 的 输出 信息 


2 url=http: [j localhost: 8080/3 s pez/ch08/checkUsax. jsp 
url=http: //localhost:8080/jspsx/ch08/main.jsp checkuser, jsp 跳 转 到 main. html 时 
4 str= 盖 小 蒋 过 滤器 的 输出 信息 


图 8-4 利用 过 滤器 强制 用 户 登录 运行 效果 及 调试 信息 


对 于 未 登录 的 用 户 , 在 MyEclipse 开发 环境 中 输入 任意 地 址 ,都 会 强制 转 登录 页 面 (下 
面 可 观察 到 调试 信息 ) ,登录 成 功 后 ,再 访问 站 点 其 他 资源 就 不 会 再 要 求 登 录 了 。 


第 9 #5 EL 与 JSTL 


EL(Expression Language) 表 达 式 语言 主要 为 了 避免 在 JSP 中 出 现 脚本 。 提 供 在 JSP 
中 简化 表达 式 的 方法 。 实 验 目的 是 熟悉 与 初步 掌握 EL 表达 式 的 使 用 ,并 认识 使 用 EL 表达 
式 可 增强 程序 的 可 读 性 与 可 维护 性 。 

该 技术 中 内 置 很 多 的 隐 含 对 象 可 以 方便 开发 者 直接 访问 ,同时 使 用 EL 可 以 快速 地 遍 
历 域 中 属性 以 及 实现 算术 计算 。 

EL 在 获取 指定 域 属 性 时 会 默认 地 从 最 小 的 域 到 最 大 的 域 逐 一 进行 检索 指定 的 属性 ， 
直到 找到 并 返回 。 


实验 9.1 表达 式 语 言 的 使 用 


【实验 内 容 】 

编写 JSP 程序 ,演示 使 用 EL 运算 符 进行 基本 运算 。 
【实验 日 的 】 

了 解 表达 式 语言 的 功能 ; 掌握 表达 式 语言 的 使 用 。 
【实验 步骤 】 


(1) 编写 JSP 程序 el_operator. jsp. 
el operator. jsp 参考 代码 如 下 : 


<% (à page contentType = "text/html;charset = utf -8" %> 
<html> 
< head»« title» JSP 2.0 Expression Language — Basic Arithmetic </title> </head> 
< body> 
<hl> JSP 2.0 表达 式 语 言 - 基本 算术 运算 符 </hl >< hr > 
该 例 说 明基 本 的 表达 式 语 言 的 算术 运算 符 的 使 用 ,其 中 包括 加 (+ ) \ 减 ( - )、 乘 (* )、 除 (/ 或 
div) 、 取 余 (9 或 mod), <br> 
< blockquote > 
<code> 
< table border = "1"> 
< thead>< td>< b» EL 表达 式 </b></td><td><b> 结 果 </b></td></thead> 
<tr><td>\ $ {1}</td> « td» $ (1)«/td» </tr> 
«tr»«tdo»XV$ (1 + 2)«/td» «td» $ (1 + 2)«/td» </tr> 
<tr><td>\$ (1.2 + 2.3)«/td» «td»$ (1.2 + 2.3)«/td» </tr> 
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<tr><td>\$ {1.284 + 1.4]«/td» «td» $ {1.284 + 1.4]«/td» </tr> 
«tr»«td»X$ (-4 - 2)«/td» «td» $(-4 - 2)«/td» </tr> 
<tr><td>\ $ (21 * 2)«/td» «td» $ (21 * 2)«/td» </tr> 
«tr» «td» $ {3/4}</td> < td» $ {3/4}</td> </tr> 
«tr» «td» $ (3 div 4)«/td» < td» $ (3 div 4)«/td» </tr> 
« tr» « td» $ (3/0)«/td» < td» $ (3/0]«/td» </tr> 
<tr> <td>N $ (10$ 4}</td> « td» $ {10% 4)«/td»«/tr» 
«tr» « td» $ (10 nod 4)</td> < td» $ (10 поа 4)«/td» </tr> 
<tr><td>\ $ ((1222) ? 3 : 4])«/td» « td» $ {(1==2) ? 3 : 4]«/td» </tr> 
</table> 

</code> 

</blockquote > 

</body> 

</html> 


(2) 程序 运行 ,效果 如 图 9-1 所 示 。 


Expression Language - Windows Internet Explorer loj xj 
TO [Oe reen e aa мт уэ] 
JSP 2.0 表达 式 语言 - 基本 算术 运算 符 


该 例 说 明了 基本 的 表达 式 语言 的 算术 运算 符 的 使 用 ， 其 中 包 
MERO), RORO 或 div), HR (% 或 mod), 


EL 表达 式 结果 
801) 1 
si + 2} з 
$1.2 + 2.3} 3.5 


$(1.2E4 + 1.4] |12001.4 
${-4- 2} -6 
${21*2} 42 
${3/4} 0.75 

$(3 div 4} 0. 75 

$ (3/0) Infinity 
$ (1094) 

$ (10 mod 4} 
${(1==2) ? 3 : 4) 


图 9-1 利用 EL 表达 式 进 行 基本 运算 


CD 编写 JSP 程序 implicit. jsp ,体验 EL 隐 含 对 象 的 使 用 。 
implicit. jsp 参考 代码 如 下 : 


<% @ page contentType = "text/html;charset = utf – 8" pageEncoding = "utf- 8" %> 
<html> 
<head> 
<title>EL implicit objects </title> 
</head> 


<body> 
<% request. setCharacterEncoding("utf – 8"); %> 
<h3>JSP 2.0 表达 式 语 言 - 隐 含 对 象 </h3 >< hr > 
<blockquote> 
<b> 输 入 yourName 参数 值 </b> 
< form action = "implicit. jsp" method = "post"> 
yourName = < input type = "text" name = "yourName" value = " $ (param[ 'yourName']}"> 
< input type = "submit"> 
</form><br> 
<code> 
< table border = "1"> 
< thead> 
<td><b> EL 表达 式 </b></td> 
<td><b> 结 果 </b></td> 
</thead> 
<tr><td>\ $ (param. yourName}</td>< td» $ (param. yourNane] &nbsp;«/td » «/tr > 
<tr><td>\ $ (param. yourNane]«/td »« td» $ (param. yourNane] &nbsp;«/td » «/tr > 
« tr»« td» $ (header. host) «/td »« td» $ (header. host] «/td» </tr> 
« tr»« td» $ (header. accept. )«/td» < td» $ (header. accept]«/td» «/tr > 
< tr >< td» $ (header. user – agent}</td> < td> $ (header. user - agent]«/td» «/tr» 
</table> 
</code> 
</blockquote > 
</body> 
</html> 


Gp 程序 运行 ,效果 如 图 9-2 所 示 o 
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JSP 2.0 表达 式 语言 - 隐 含 对 象 


输入 yourName 参 数值 

yourName- [7 一 提交 查询 内 容 | 

EL 表达 式 结果 

$ (param.yourName) | 盖 小 茨 

S${fparam.yourName} | 盖 小 茨 

S{header.host} localhost:8080 

image/gif. image/jpeg. image/pjpeg. image/pjpeg, application/x- 
shockwave-flash, application/vnd.ms-excel, application/vnd.ms- 
S(headeraccept] ^ |powerpoint, application/msword, application/x-silverlight, 
application/xaml-xml, application/x-ms-xbap, application/x-ms- 
application, application/vnd.ms-xpsdocument, */* 


0 


| S (header.user- 
agent) 


图 9-2 EL 表达 式 中 隐 含 对 象 操作 
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实验 9%.2 EL 表达 式 实验 


【实验 内 容 】 


在 客户 端的 表单 中 填写 用 户 注册 信息 并 提交 后 ,应 用 EL 表达 式 通 过 访问 JavaBean 属 
性 的 方法 将 用 户 信息 显示 到 页 面 上 。 


【实验 步骤 】 


(1) 编写 用 户 实体 类 UserFrom. java、 用 户 填 写 表单 信息 程序 forminfo. jsp、 表 单 处 理 
程序 deal. jsp, 该 页 面 使 用 JavaBean 自动 接收 表单 信息 ,再 利用 EL 表达 式 获取 JavaBean 
的 属性 ,在 浏览 器 中 显示 。 

UserFrom. java 参考 代码 如 下 : 


package bean; 
public class UserFrom { 
private String username; 
private String pwd; 
private String sex; 
private String[] affect = null; 
public String getUsername() (return username;] 
public void setUsername(String username) { this. username = username; } 
public String getPwd() ( return pwd; } 
public void setPwd(String pwd) { this.pwd = pwd;} 
public String getSex() { return sex;} 
public void setSex(String sex) {this. sex = sex;] 
public String[] getAffect() (return affect; } 
public void setAffect(String[] affect) (this.affect = affect; } 
) 


forminfo. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<html> 
<head> 
<title> forminfo. jsp </title> 
</head> 
<body> 
请 填写 表单 信息 <br> 
< form action = "./forndeal. jsp" method = "post"> 
用 户 名 :< input type = "text" name = "username">< br > 
密码 :< input type = "password" name = "pwd" >< br> 
确认 密码 : < input type = "password" name = "repwd">< br > 
性 别 : < input type = "radio" папе = "sex" value = " 男 "> 男 
< input type = "radio" name = "sex" value = " 女 "> 女 <br> 
爱好 : < input name = "affect" type = "checkbox" value = "体育 "> 体育 
< input name = "affect" type = "checkbox" value = "美术 "> 美术 
< input name = "affect" type = "checkbox" value = "音乐 "> 音乐 


< input name = "affect" type = "checkbox" value = "旅游 "> 旅游 < br > 
< input type = "submit" value = "提交 "> 
< input type = "reset" value = " 重 置 "><hr> 
该 表单 信息 将 提交 给 deal. jsp 页 面 , deal. jsp 使 用 EL 表达 式 获 取 表 单 信息 。 
</form> 
</body> 
</html> 


formdeal. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
< jsp:useBean id = "userFrom" class = "bean. UserFrom" scope = "page" /> 
< * request. setCharacterEncoding("utf -8"); %> 
< jsp:setProperty property = " * " name = "userFron"/» 
<html> 
« head» < title» deal. jsp </title> </head> 
<body> 
用 户 显示 : <br> 
用 户 名 : $ (userFrom. usernane]« br> 
密码 : $ (userFrom.pwd }< br> 
TEX: $ (userFrom.sex }< br> 
Xu: $ (userFrom. affect[0] } $ (userFrom. affect[1] ) $ (userFrom. affect[2] ) 
$ (userFrom.affect[3] )« br» 
< input папе = "button" type = "button" value = "返回 ”onclick = "window. location. href = 
'forminfo. jsp'" > 
</body> 
</html> 


(2) 在 地 址 栏 输入 URL, 观 察 运行 效果 ,体会 EL 表达 式 的 用 法 ,运行 效果 如 图 9-3 
所 示 。 


deal jsp - Tindows Internet Explorer unix 


http://localhost: 8080/jspsx/ch09/formdeal. jsp 


用 户 显 示 : 
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9-3 EL 表达 式 获取 表单 参数 


(3) 参考 下 列 投票 示例 ,应 用 EL 表达 式 显示 投票 结果 。 编 写 一 个 简单 的 投票 系统 。 
VoteServlet. java 参考 代码 如 下 : 


package servlet; 

import java. io. IOException; 
import java. io. PrintWriter; 
import java.util. * ; 
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import javax. servlet. ServletContext; 
import javax. servlet. ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
public class VoteServlet extends HttpServlet { 
private static final long serialVersionUID - 1L; 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
request. setCharacterEncoding("UTF - 8") ; // 设 置 请 求 的 编码 方式 
String item = request. getParameter(" item"); // 获 取 投 票 项 
ServletContext servletContext = request. getSession().getServletContext(); 
// 获 取 ServletContext X1 $$ , 该 对 象 在 application 范围 内 有 效 
Map map = nu11; 
if(servletContext.getAttribute("voteResult")!= null){ 
пар = (Мар) servletContext. getAttribute("voteResult");// 获 取 投 票 结果 
map. put( item, Integer. parseInt(map. get( item). toString()) +1);// 将 当前 的 投票 项 加 1 
}else{// 初 始 化 一 个 保存 投票 信息 的 Map 集 合 ,并 将 选 定投 票 项 的 投票 数 设置 为 1, 其 他 为 0 
//String[ ] arr = {" 基 础 教程 类 ", "实例 集锦 类 ", "经 验 技巧 类 "," 速 查 手册 类 ", "ЖИТ Ж"); 
String[] агг = ("a", "b", "c", "d" ,"e"); 
map = new HashMap( ) ; 
for(int i=0;i<arr. length; i++){ 
if(item.equals(arr[i]))( // 判 断 是 否 为 选 定 的 投票 项 
map.put(arr[i], 1); 
}else{ 
map. put(arr[i], 0); 
) 
) 
) 
servletContext. setAttribute("voteResult"，map) ;// 保 存 投票 结果 到 ServletContext 对 象 中 
response. setContentType( " text/html;charset = UTF - 8"); 
// 设 置 响应 的 类 型 和 编码 方式 ,如果 不 设置 弹出 的 对 话 框 中 的 文字 将 乱码 
PrintWriter out = response. getWriter(); 
out. println("« script» alert( ' 投 票 成 功 ! ') ; window. location. href = '. /ch09/voteResult. 
jsp';«/script»"); 
) 
) 


vote. jsp 参考 代码 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF — 8" pageEncoding = "UTF — 8" % > 
<! DOCTYPE HTML > 

<html> 

<head> 

< meta charset = "utf 一 8"> 

<title> 应 用 EL 表达 式 显示 投票 结果 </title> 
< style» 

ul( list- style: none;] 

li( padding:5px;] 

</style> 

</head> 


<body> 


< h3 > 您 最 需要 哪 方面 的 图 书 ?</h3 > 
< form name = "form1" method = "post" action = "../VoteServlet"> 
<ul> 


< 11 >< input name = "item" type = "radio" class = "noborder" value = "a" checked > 基础 教程 类 

</li> 
< 11 >< input name = "item" type = "radio" class = "noborder" value = "b"> 实 例 集锦 类 </li> 
«li»« input name = "item" type noborder" value = "c"> 经 验 技巧 类 </1i> 
«li» < input name = "item" type = "radio" class = "noborder" value = "d"> 速 查 手册 类 </1i> 
< 11 >< input name = "item" type = "radio" class = "noborder" value = "e"> 案 例 剖 析 类 </1i> 
«li» < input папе = "Submit" type = "submit" class = "btn grey" value = "投票 "> 

< input name = "Submit2" type = "button" class = "btn grey" value = "查看 投票 结果 " 

onClick = "window. location. href = 'voteResult. jsp'"></1i> 


"radio" class 


</ul> 
</form> 

</body> 

</html > 


voteResult. jsp 参考 代码 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF - 8" pageEncoding = "UTF — 8" % > 
<! DOCTYPE HTML > 
<html> 
<head> 
< meta charset = "utf - 8"> 
<title> 显 示 投 票 结果 页 面 </title> 
< style> 
ul{ list- style: none;} 
li( padding:5px;} 
</style> 
</head> 
<body> 
< h3 > 您 最 需要 哪 方面 的 图 书 ?</h3 > 
<ul> 
< 1i> 基 础 教程 类 : Snbsp;< img src = "../img/bar. gif" 
width = ' $ (120 * (applicationScope. voteResult[ "а" ]/ (applicationScope. voteResult[ "a" ] + 
applicationScope. voteResult[ "b" ] + applicationScope. voteResult[ "с" ] + 
applicationScope. voteResult["d"] + applicationScope. voteResult[ "е"]))}' 
height = "13"> 
$ (nu11 == applicationScope. voteResult.a?0:applicationScope. voteResult.a)</1i> 
<1i> 实 例 集锦 类 : &nbsp;« img src = "../img/bar.gif" 
width= ' $ (120 * (applicationScope. voteResult[ "b" ]/ (applicationScope. voteResult["a"] + 
applicationScope. voteResult[ "b" ] + applicationScope. voteResult[ "с" ] + 
applicationScope. voteResult["d"] + applicationScope. voteResult[ "е" ]))}' 
height = "13"> 
$ {null == applicationScope. voteResult.b?0:applicationScope. voteResult. b}</li> 
<1i> 经 验 技巧 类 : Snbsp;< img src = "../ing/bar.gif" 
width= ' $ (120 * (applicationScope. voteResult[ "с" ]/ (applicationScope. voteResult["a"] + 
applicationScope. voteResult[ "b" ] + applicationScope. voteResult[ "c" ] + 


applicationScope. voteResult["d"] + applicationScope. voteResult[ "е" ]))}' 
height = "13"> 
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$ {null == applicationScope. voteResult. c?0:applicationScope. voteResult.c]«/li» 
<1i> 速 查 手册 类 : &nbsp;« img src = "../img/bar.gif" 
width= ' $ {120 * (applicationScope. voteResult["d"]/(applicationScope. voteResult["a"] + 
applicationScope. voteResult[ "b" ] + applicationScope. voteResult["c"] + 
applicationScope. voteResult [ " d"] + applicationScope. voteResult 
["e"]))}' height = "13"> 
$ {null == applicationScope. voteResult.d?0:applicationScope. voteResult.d]«/li > 
<і> ПТ: &nbsp;« img src = "../img/bar. gif" 
= ' $ (120 * (applicationScope. voteResult[ "е" ]/ (applicationScope. voteResult[ "а" ] + 
applicationScope. voteResult[ "b" ] + applicationScope. voteResult[ "с" ] + 
applicationScope. voteResult [ " d"] + applicationScope. voteResult 
["e"]))}' height = "13"> 
$ {null == applicationScope. voteResult. e?0:applicationScope. voteResult. e}</li> 
<1i> 共 有 : $ (applicationScope. voteResult.a + applicationScope. voteResult. b + 
applicationScope. voteResult. c + applicationScope. voteResult. d + applicationScope. 
voteResult.e} 人 投票 ! 
<hr >< input type="button" value= "返回 " onClick = "window. location. href = 'vote. jsp'"></ 
335 
</ul> 
</body> 
</html > 


(4) 运行 使 用 EL 表达 式 处 理 投 票 表单 数据 的 示例 程序 ,效果 如 图 9-4 所 示 。 


您 最 需要 哪 方面 的 图 书 ? 


e 基础 教程 类 您 最 需要 哪 方面 的 图 书 ? 
C 实例 集锦 类 | 基础 教程 类 ， Gmm. 


0 经验 技巧 类 实例 集锦 类 : NI 
rens. MO 

9 这 查 手册 类 ити. "2 

O 案例 剖析 类 案例 剖析 类 : NI 
共有 : 12 人 投票 
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第 10 章 JSP 自 定义 标签 


JSP 自 定义 标签 是 用 户 定义 的 JSP 语言 元 素 。 用 户 可 以 创建 新 的 JSP 自 定义 标签 ,以 
便 提 高 开发 效率 。JSP 2.0 规范 中 引入 Simple Tag Handlers 来 编写 这 些 自 定义 标记 ,可 以 
继承 SimpleTagSupport 类 并 重 写 的 doTag() 方 法 来 开发 一 个 最 简单 的 自 定 义 标签 。 


实验 10.1 自 定义 函数 标签 实验 


【实验 内 容 】 
设计 JSP 自 定义 函数 标签 demo:add(param. x. param. y) ,在 JSP 页 面 中 调用 该 标签 ， 
实现 两 个 整数 的 加 法 运算 。 
【实验 步骤 】 
(1) 创建 定义 函数 的 类 文件 Compute. java, 它 定义 在 JSP 中 使 用 的 add() 方 法 。 
Compute. java 参考 代码 如 下 : 


package t1dfunc; 
public class Compute { 
public static int add(String x,String у){ 


inta = 0; 
int b = 0; 
try( 


a = Integer.parseInt(x); 
b = Integer. parseInt(y); 
]catch(Exception e){ 
System. err. println( "Number format is illegal. "); 
} 
return a +t b; 
} 
} 


(2) Æ WEB-INF 下 创建 标签 库 描述 文件 taglib. tld。 它 实现 将 每 个 Java 方法 与 函数 
名 相 匹 配 。 
taglib. tld 参考 代码 如 下 : 


<?xml version = "1.0" encoding = "UTF – 8" ?> 
< taglib xmlns = " http://java. sun. com/xml/ns/j2ee" xmlns: xsi = " http://www. w3. org/2001/ 
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XMLSchema - instance" 
xsi: schemaLocation = "http://java. sun. com/xml/ns/j2ee  http://java. sun. com/xnl/ns/j2ee/ 
web- jsptaglibrary 2 0.xsd" 
version = "2. 0"> 
< description» A Simple Taglib File.</description> 
< tlib- version» 1. 0 «/tlib- version» 
< short - папе > Simple Tag Library «/short - name > 
« uri» http://www. ntu. com/function </uri> 
< function? 
< description? Adding two numbers «/description? 
< папе > add «/nane > 
< function- class > tldfunc. Compute «/function- class > 
< function - signature > 
int add( java.lang.String, java.lang.String) 
«/f£unction- signature» 
«/function» 
«/taglib» 


(3) 编写 JSP 文件 tldsum. jsp ,使 用 标签 库 URI 以 及 函数 名 调用 Java 函数 。 
tldsum. jsp 参考 代码 如 下 : 


<% @ раде contentType = "text/html;charset = utf -8" %> 
<% (à) taglib prefix = "demo" uri = "http://www.ntu.com/function" %> 


<html> 
<head>< title» Using Function </title></head> 
<body> 
<h3 > 计算 两 个 整数 之 和 </h3 >< p> 
< form action = "tldsum. jsp" method = "post"> 
X = «input type = "text" папе = "x" size- "5" /> 


Y = «input type = "text" папе = "y" size = "5" /> 
< input type = "submit" value = "计算 "> 
</form> 
<p> 
两 个 整数 的 和 为 : $ (demo:add(param.x,param.y)) 
</body> 
«/htnl > 


Са) 运行 该 程序 ,效果 如 图 10-1 所 示 。 


Using Function tp 


go. [ э» Incest 9080/7 jspss/ con/ às jsp Z] 
IPO hc SEV &mxo) IAV 帮助 0 


计算 两 个 整数 之 和 


х=[2 Y-ps [or] 
两 个 整数 的 和 为 : 35 


10-1 tldsum. jsp 页 面 运行 效果 


实验 10.2 自 定义 分 页 标签 实验 


【实验 内 容 】 


(1) 准备 数据 环境 ,采用 MySQL 数据 库 , 数 据 库 与 配套 教材 中 的 网 上 书店 数据 库 
books 一 致 。 导 入 JDBC 驱动 jar 包 , 导 入 jstl. jar 包 。 

(2) 设计 数据 库 访问 工具 类 ,包括 DBcon. java, Title. java, TitleDao. java, TitleDaoImpl. 
java。 这 些 类 请 参考 配套 教材 (JSP Web 技术 及 应 用 教程 ?中 的 源 代 码 , 这 里 从 略 。 

(3) 设计 JSP 自 定义 分 页 标签 并 进行 测试 。 


【实验 步骤 】 


CD 设计 分 页 标签 处 理 辅助 类 (JavaBean) 。 

创建 标签 处 理 类 之 前 需要 一 个 辅助 的 JavaBean, 用 这 个 JavaBean 存放 有 关 分 页 每 一 页 
的 相关 信息 ,如 共有 多 少 条 记录 共有 和 多少 页 .当前 是 第 几 页 .每 页 有 多 少 条 记录 等 信息 。 

PageResult. java 参考 代码 如 下 : 


package tag; 

import java.util.ArrayList; 
import java.util.List; 
public class PageResult < E > ( 


private List «E» list = new ArrayList < E»() ; // 查 询 结果 
private int pageNo = 1; // 实 际 页 号 
private int pageSize = 4; // 每 页 记录 数 
private int recTotal = 0; // 总 记录 数 


public List getList() {return list;} 

public void setList(List <E> list) {this.list = list; } 

public int getPageNo() {return pageNo;} 

public void setPageNo( int pageNo) {this.pageNo = pageNo;} 

public int getPageSize() {return pageSize;} 

public void setPageSize( int pageSize) {this. pageSize = pageSize;} 
public int getRecTotal() {return recTotal;} 

public void setRecTotal(int recTotal) (this.recTotal = recTotal;} 


public int getPageTotal() { // 根 据 记 录 数 计算 总 的 页 数 
int ret = (this.getRecTotal() — 1) / this.getPageSize() + 1; 
ret = (ret«1)?1:ret; 
return ret; 
) 
public int getFirstRec() // 计 算 第 一 页 的 记录 数 
{ intret = (this.getPageNo()- 1) * this.getPageSize(); + 35 
ret = (ret « 1)?0:ret; 第 
return ret; } 10 
) x* 
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(2) 设计 分 页 标签 处 理 类 (JavaBean) 。 
PaginationTag. java 参考 代码 如 下 : 


package tag; 
import javax. servlet. jsp. JspWriter; 
import javax. servlet. jsp. tagext. TagSupport; 
public class PaginationTag extends TagSupport ( 
private static final long serialVersionUID = - 5904339614208817088L; 
public int doEndTag() ( 
try ( PageResult pageResult = null; 
pageResult = (PageResult) pageContext.getRequest().getAttribute("pageResult"); 
if (pageResult!- null)( 
StringBuffer sb = new StringBuffer(); 
sb. append("« div style = V'text – align:right;padding:6px 6px 0 0;\">\r\n") 
. append(" J£" + pageResult.getRecTotal() + "条 记录 &nbsp; xn") 
.ppend(" 每 页 显示 < input name = V'pageResult. pageSizeV" value = \"" + pageResult 
.getPageSize() + "N" size= V'3V" /> 条 &nbsp; An") 
.append(" 第 < input name = V" pageResult. pageNoV" value = \"" + pageResult. getPageNo() + "V 
" size= \"3\" /> 页 ") 
.append(" / 3t" + pageResult.getPageTotal() + "页 \r\n") 
. append("« a href = V' javascript:page first();\"> 第 一 页 </a> \r\n") 
.append("« a href = \"javascript:page_pre();\"> 上 一 页 </a>\r\n") 
.append("<a href = \"javascript:page_next();\"> 下 一 页 </a> \г\п") 
.append("<a href = \"javascript:page_last();\"> 最 后 一 页 </a>\r\n") 
. append("« input type = V'buttonV" onclick = \"javascript:page до() ;\" value = \" 转 到 \" />\r\n") 
.append("< script >\r\n").append(" var pageTotal = " + pageResult.getPageTotal() + ";\г\п") 
.append("var recTotal = " + pageResult.getRecTotal() +";\r\n") 
.append("</script >\r\n").append("</div>\r\n"); 
sb. append( "< script >\r\n"); 
sb. append( "function page_go()\r\n").append("{\r\n").append("page уа1ідаёе() ;\г\п") 
. append( "document. forms[0]. submit();\r\n").append("}\r\n") 
.append( "function page first()\r\n").append("{\r\n") 
.append("document. forms[0].elements[\"pageResult. pageNo\"].value = 1;\r\n") 
.append("document. forms[0]. submit();\r\n").append("}\r\n") 
.append("function page pre()\r\n") .append("{\r\n") 
.append("var pageNo = document. forms[0].elements[\"pageResult. pageNo\"].value;\r\n") 
. append( "document. forms[ 0]. elements[\"pageResult. радећо\" ]. value = parseInt(pageNo) - 1;\r\n") 
.append("page_validate();\r\n") 
.append("document. forms[0]. submit();\r\n").append("}\r\n") 
.append( "function page_next()\r\n").append("{\r\n") 
.append("var pageNo = document. forms[0].elements[\"pageResult. pageNo\"].value;\r\n") 
. append( "document. forms[ 0]. elements[ V'pageResult. pageNo\" ]. value = parseInt(pageNo) + ;\г\п") 
.append("page_validate();\r\n") 
. append(" document. forms[0]. submit();\r\n").append("}\r\n") 
.append(" function page last() An") . append( " (VA n") 
. append( "document. forms[0]. elements[ V" pageResult.pageNoV']. value = pageTotal; \г\п") 
. append( "document. forms[0]. subnit(); \г\п"). append(" }\г\п") 
. append(" function page validate()\r\n").append("{\r\n") 
.append("var pageNo = document. forms[0]. elements[ V" pageResult. pageNo V" ]. value; \г\п") 
.append("if (радећо < 1)pageNo = 1; Vn") 


.append("if (pageNo > pageTotal)pageNo = pageTotal;\r\n") 

.append("document. forms[0].elements[\"pageResult. радећо\" ]. value = pageNo;\r\n") 
.append("var pageSize = document. forms[0].elements[\"pageResult. pageSize\"].value;\r\n") 
.append("if (pageSize«1)pageSize = 1;\г\п") 

.append( "document. forms [0]. elements [ N" pageResult. pageSizeV"]. value = pageSize; Vr Vn"). 
append("}\r\n") 

.append("function order_by(field){\r\n") 

.append("document. forms[0]. elements[\"pageResult. orderBy\"].value = field;\r\n") 
.append("page first();\r\n").append("}\r\n"); 

sb. append( "</script >\r\n"); 

JspWriter out = pageContext.getOut(); 

out. println(sb. toString());] 

) catch (Exceptione)( ) 

return EVAL PAGE; 

) 

) 


Pagination Tag 标签 处 理 类 继承 了 TagSupport, 而 pageContext 属性 是 在 TagSupport 
中 定义 的 ,所 以 在 类 中 可 以 直接 使 用 这 个 对 象 。 
在 标签 处 理 类 PaginationTag 中 ,有 如 下 语句 : 


pageResult = (PageResult) pageContext. getRequest() . getAttribute("pageResult"); 


pageContext 是 上 文 对 象 ,通过 这 个 对 象 可 以 获取 封装 在 请 求 对 象 中 的 信息 pageResult 
对 象 。 这 个 pageResult 对 象 是 在 ToViewBook 的 Servlet 保存 在 request 对 象 中 的 。 只 要 
得 到 pageResult 对 象 ,就 可 以 获得 有 关 分 页 的 所 有 信息 。 在 标签 类 中 大 部 分 代码 是 打印 
HTML 页 面 ,同时 将 分 页 的 相关 信息 写 进 HTML 中 。 在 使 用 这 个 标签 类 时 要 注意 ,标签 一 
定 要 放 在 一 个 表单 form 中 。 因 为 在 单 击 * 上 一 页 ”或 “下 一 页 ”的 链接 时 实际 上 是 提交 一 个 
请 求 ,这 个 请 求 提交 给 所 在 form 的 action 所 指向 的 服务 器 处 理 程序 。 为 了 节省 篇 幅 这 里 没 
有 给 出 全 部 的 代码 ,其 余 代 码 可 查看 源 程序 。 
Pagination Tag 标签 处 理 类 中 没有 标签 体 , 所 以 只 需要 重 写 doEnd Tag O 3È doStartTage O 
方法 就 可 以 ,标签 处 理 代 码 是 写 在 doEndTag() 方 法 中 的 。 
(3) 创建 分 页 标签 库 描述 文件 page-common. tld。 
标签 库 描述 文件 对 标签 处 理 类 和 标签 之 间 建 立 映射 关系 ,这 样 在 JSP 页 面 中 只 要 引入 
标签 库 , 就 可 以 使 用 标签 库 中 声明 的 所 有 标签 。 
page-common. tld 参考 代码 如 下 : 
<?xml version = "1.0" encoding = "UTF — 8"?> 
<! DOCTYPE taglib 
PUBLIC " - //Sun Microsystems, Inc. //DTD JSP Tag Library 1.2//EN" 
"http: //јаха. sun. con/dtd/web - jsptaglibrary 1 2.dtd"> 
< taglib xmlns = "http: // java. sun. con/JSP/TagLibraryDescriptor"» 
«tlib- version» 1.2 «/tlib- version» 
< jsp- version» 1.2 «/jsp - version? 
< short – name > common </ short — name > 
«tag» 
< name > pager «/name > 
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< tag - class» tag. PaginationTag </tag - class > 
< body - content > empty </ройу - content > 
«/tag» 
«/taglib» 


标签 库 中 只 定义 了 一 标签 pager, 对 应 的 处 理 类 为 tag 包 中 PaginationTag 类 ,标签 没有 
标签 体 。 标 签 库 文件 保存 在 了 WEN-INF 目录 下 。 

(4) 设计 一 个 处 理 请 求 的 Servlet(ToViewBooks. java? ,在 Servlet 中 接收 页 面 传递 的 
请 求 参数 ,请求 参 数 包 括 当前 要 显示 第 几 页 以 及 每 页 的 记录 数 。 然 后 创建 PageResult 类 的 
实例 ,将 分 页 的 相关 信息 封装 在 该 实例 对 象 中 ,再 将 这 个 对 象 保存 在 request 中 ,并 转发 给 
viewBookByPageTag. jsp 进行 显示 。 

tag. ToViewBooks. java 参考 代码 如 下 : 


package tag; 
import java. io. IOException; 
import java. util. List; 
import javax. servlet. ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import bean. TitleDao; 
import bean. TitleDaoImpl; 
public class ToViewBooks extends HttpServlet ( 
public ToViewBooks() {  super();) 
public void destroy() (super.destroy(); } 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doPost(request, response) ; 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
PageResult pageResult = new PageResult(); 
TitleDao dao = new TitleDaoImpl(); 


List list = dao. getTitles(); // 得 到 图 书 列表 
int pageSize = pageResult. getPageSize(); // 每 页 显示 的 记录 数 
int pageNo; // 当 前 页 号 


if(request. getParameter("pageResult. pageNo")!= nu11) ( 
pageNo = Integer. parseInt(request. getParameter("pageResult. радећо")); 


// 从 请 求 中 获取 当前 页 号 
} 
else 
pageNo = pageResult. getPageNo( ) ; // 采 用 默认 的 页 号 
if(request. getParameter("pageResult. pageSize")!- null) 
// 获 取 请 求 中 每 页 显示 的 记录 数 


pageSize = Integer. parseInt(request. getParameter("pageResult. pageSize")); 

int len = list.size(); 

len = len >(pageNo) * pageSize?(pageNo) * pageSize:len;  // 显 示 到 当前 页 时 的 记录 数 
// 将 第 pageNo 页 的 数据 从 list 中 复制 到 listl 数组 中 

List listl = list.subList((pageNo – 1) * pageSize, len); 


// 将 要 显示 的 当前 页 的 数据 , 当前 页 数 , 总 记录 数 保存 在 pageResult 对 象 中 
pageResult.setList(listl); 
pageResult. setPageNo( pageNo) ; 
pageResult. setRecTotal(list.size()); 
pageResult. setPageSize(pageSize); 
request. setAttribute("pageResult", pageResult); 
request. getRequestDispatcher(" /test/viewBookByPageTag. jsp"). forward(request, response) ; 
) 
public void init() throws ServletException { 
) 
} 


上 面 代码 中 ,将 pageResult 对 象 保存 在 request 中 ,然后 转发 到 viewBookByPageTag. 
jsp 页 面 。 

(5) 设计 测试 页 面 viewBookByPageTag.jsp, 应 用 自 定义 分 页 标签 显示 图 书信 息 。 

viewBookByPageTag. jsp 参考 代码 如 下 : 


<% (à page language = "java" contentType = "text/html; charset = utf 一 8" pageEncoding = "utf 
-8"%> 
<% @ taglib uri = "http: // јаха. sun. con/ јѕр/ јѕ 1 /соге" prefix- "c" %> 
<% (à taglib uri = "/WEB- INF/page – common. tld" ргеҒіх = "page" %> 
<html> 
<head> 
<title> 图 书 列 表 </title> 
</head> 
<body>< hl align = "center"> 浏 览 图 书 </hl > 
< forn action = ". /ToViewBooks"> 
< table align = "center" bgcolor = lightgrey width = "800"> 
<tr><td> ISBN</td><td> 书 名 </td><td> 版 本 </td><td> 发 布 时 间 </td>< td> 价 格 </td> 
</tr> 
< c:forEach var = "titles" items =" $ {requestScope. pageResult. list}" > 
«tr bgcolor = cyan ><td><ahref = ". /ToViewTitle?isbn= $ (titles. isbn }" title= " 单 击 显 

示 详 细 信息 "> 

$ (titles. isbn}</a></td> 

«td» $ {titles. title}</td> 

« td» $ (titles. editionNumber]«/td > 

« td» $ (titles.copyright]«/td» 

«td» $ {titles. price} </td> 

</tr> 

</c:forEach> 

</table> 
< table align = "center"> 
< tr »« td>< page:pager/></td></tr> 


</table> 
</form> 
</body> 
</html > 
viewBookByPageTag. jsp 页 面 中 是 利用 EL 表达 式 直 接 从 request 对 象 中 取得 要 显示 


的 记录 集合。 为 了 使 用 自 定义 分 页 标签 ,要 首先 导入 自 定义 的 分 页 标签 库 : 
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<% @ taglib uri = "/WEB – INF/page — common. tld" prefix = "page" %> 


这 行 命令 是 将 前 面 自 定义 的 分 页 标签 库 导 入 当前 页 面 , 同 时 定义 标记 前 组 为 page。 页 
面 中 的 一 page:pager/ 过 命令 就 是 调用 了 标签 库 中 定义 的 pager 标签 ,输出 自 定义 标签 的 分 
页 功能 。 

由 于 这 里 采用 的 是 JSP 2. 0 版 本 ,所 以 不 用 在 web. xml 中 声明 dd 文件 。 

(6) 浏览 器 的 地 址 栏 中 输入 URL ,请 求 viewBookByPageTag. jsp ,观察 显示 效果 ,如 
10-2 所 示 o 


图 10-2 ToviewBooks 分 页 效果 


在 这 个 页 面 中 , 当 单 击 翻 页 链接 时 ,实际 上 是 提交 给 了 ToViewBooks 类 ,在 这 个 
Servlet 中 重新 获取 页 面 的 相关 数据 并 进行 处 理 , 并 将 处 理 结果 保存 在 request 对 象 中 ,然后 
再 转发 到 viewBookByPageTag. jsp 页 面 ,最终 实 现 了 翻 页 功能 。 


第 11 25 项 目 实 训 


本 章 提 供 了 典型 且 实 用 的 规模 大 小 不 等 的 实 训 项 目 , 通 过 巩固 和 掌握 这 些 典型 应 用 为 
综合 性 项 目 开 发 积累 经 验 。 通 过 完成 这 些 项 目 实 训 ,为 应 用 JSP Web 技术 解决 实际 应 用 打 
下 良好 基础 。 


项 目 实 训 1 学 生 信 息 管理 系统 


【 实 训 任 务 】 


设计 一 个 典型 的 班级 学 生 信息 管理 系统 。 学 生 名 单 由 后 台 导 入 数据 库 , 学 生 信 息 及 个 
人 照片 由 学 生 自 己 填写 上传。 学 生 可 在 已 有 项 目的 基础 进一步 完善 项 目 功能 。 本 项 目 中 ， 
为 了 避免 项 目 重 新 发 布 会 清空 学 生 已 经 上 传 的 照片 文件 ,将 学 生 上 传 照 片 文件 的 保存 路 径 
提升 一 级 , 放 至 Web 服务 器 的 根 路 径 下 。 因 此 ,要 求 在 Tomacat 服务 器 的 webapps 目录 下 
新 建 保存 学 生 上 传 照片 的 文件 夹 photo_stuinfo。 


【开发 工具 】 
MyEclipse, Web 服务 器 为 Tomacat ЛЕ Jy MySQL 
【设计 步骤 】 
(1) 数据 库 设计 : 数据 库 名 称 为 student, 学 生 信息 表 stuinfo 的 结构 如 图 11-1 所 示 。 
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(2) 设计 数据 库 连 接 类 : bean. Dbcon. java, 

该 类 主要 提供 获取 数据 库 连 接 对 象 的 方法 public static Connection getConnction() , 设 
计时 ,注意 检查 数据 库 名 数据库 用 户 名 和 数据 库 登录 密码 是 否 正确 。 

bean. Dbcon. java 参考 代码 如 下 : 


package bean; 
import java. sql. Connection; 
import java. sql. DriverManager; 
import java. sql. PreparedStatement; 
import java. sql. ResultSet; 
import java. sql. SQLException; 
public class DBcon { 
private static final String DRIVER CLASS = "com. mysql. jdbc. Driver"; 
private static final String DATABASE URL - 
" jdbc : nysq1 : //localhost:3306/student?useUnicode = true&characterEncoding = utf - 8"; 
private static final String DATABASE USRE - "root"; 
private static final String DATABASE PASSWORD = "123"; 
// 返 回 连接 
public static Connection getConnction( ) ( 
Connection dbConnection = null; 
try ( 
Class.forName(DRIVER CLASS); 
dbConnection = DriverManager.getConnection(DATABASE URL, 
DATABASE USRE, DATABASE PASSWORD); 
) catch (Exception e) ( 
e. printStackTrace(); 
) 


return dbConnection; 


) 


(3) 设计 处 理 上 传 照片 的 Servlet 类 FileUpload. java, 

该 程序 设计 思路 : 首先 从 session 中 获取 登录 时 存放 的 学 号 ,为 保存 照片 文件 名 做 准 
备 ; 然后 获取 上 传 的 照片 文件 ,检查 文件 名 及 文件 大 小 是 否 符合 规定 。 需 要 注意 的 是 ,上 传 
文件 的 路 径 应 该 设 定 在 Web 服务 器 的 根 路 径 下 ,而 不 宜 放 在 项 目 自 身 的 WEB ROOT F; 
否则 , 当 项 目 重新 发 布 时 ,会 清除 已 上 传 的 照片 文件 。 为 了 便于 管理 ,将 上 传 的 照片 文件 统 
一 按 学 号 重新 命名 。 

FileUpload. java 参考 代码 如 下 : 


package servlet; 

import java. io. IOException; 

import java. io. PrintWriter; 

import java. io. File; 

import java. util. Iterator; 

import javax. servlet. ServletException; 

import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import org. apache. commons. f ileupload.FileItem; 


import org. apache. commons. fileupload. FileItemFactory; 
import org. apache. commons. f ileupload. disk.DiskFileltemFactory; 
import org. apache. commons. f ileupload. servlet.ServletFileUpload; 
public class FileUpload extends HttpServlet { 
public FileUpload() ( 
super(); } 
public void destroy() { 
super.destroy(); } 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
doPost(request,response); } 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
request. setCharacterEncoding("gb2312"); 
response. setContentType(" text/html;charset = gb2312"); 
PrintWriter out = response. getWriter(); 
String xh = (String)request. getSession().getAttribute("xh"); 
// 拿 到 登录 时 存放 的 学 号 ,为 保存 照片 时 重新 命名 照片 文件 名 做 准备 
boolean isMultipart = ServletFileUpload. isMultipartContent(request); 
if(isMultipart){ 
FileItemFactory factory = new DiskFileItemFactory(); 
ServletFileUpload upload = new ServletFileUpload(factory); 
Iterator items; 
try( 
items = upload.parseRequest(request).iterator(); 
while(items.hasNext())( 
FileItem item = (FileItem) items.next(); 
if (! item. isFormField())( 
float size - item.getSize()/1024.0f; // 获 取 上 传 的 文件 大 小 (KB) 
// 取 出 上 传 文件 的 文件 名 称 及 文件 类 型 
String name = item.getName(); 
String fileType = name. substring(name. lastIndexOf('. ') + 1, nane. length()); 
if(100 < size || !fileType.equals("jpg"))( 
out. print("« font size = '4'color = 'red> 你 上 传 的 文件 类 型 或 大 小 不 符合 要 求 ! 
</font><p>"); 
out.print(" 你 上 传 的 文件 是 : " + name+"," + size+"KB<hr>"); 
out. print("« a href = 'uploadfile. jsp'> 返 回 上 传 页 面 </a>"); } 
else( 
String fileName = name. substring(name. lastIndexOf('\\') + 1, nane. length()) ; 
ПЕВ 
String ctxpath = this. getServletContext().getRealPath("");// 项 目的 物理 路 径 
String photopath = ctxpath. substring(0, ctxpath. lastIndexOf("\\")) + "NN 
photo stuinfo"; 
File uploadedFile = new File(photopath, xh + ". jpg"); 
item. write(uploadedFile); 
// 打 印 上 传 成 功 信息 
response. setContentType( " text/html"); 
response. setCharacterEncoding("gb2312"); 
out. print("« font size- '4> 恭喜 你 ,照片 文件 上 传 成 功 !<p>"); 
out. print("« font size = '2'> 你 上 传 的 文件 是 : " + nane + "< p>"); 
out. print(" 在 服务 器 上 保存 的 位 置 是 :" + photopath+ "< р>"); 
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out. print(" 在 服务 器 上 保存 的 照片 文件 名 统一 以 学 号 命名 为 :" + xh + ". jpg 
<font><p>"); 
out. print("« a href = 'uploadfile. jsp> 返 回 上 传 页 面 </a>"); 
//<a href = "uploadfile. jsp"> 返 回 上 传 页 面 </a> 
))) 
}catch(Exception e)( е. printStackTrace(); 
n) 
public void init() throws ServletException (] 
} 


(4) 设计 主页 文件 index. html, 
index. html 参考 代码 如 下 ; 


<html> 
< head> 
« title» JSP Web 项 目 实 训 </title> 
</head> 
< frameset rows = "200, * " border = 0 > 
< frame align = center SRC = img/ntu2. gif NAME = f top FRAMEBORDER = 0 SCROLLING = AUTO 
NORESIZE = "TURE"> 
< frameset cols = "20%, * " border=0> 
< frame SRC= left. jsp МАМЕ = f left FRAMEBORDER = 1 SCROLLING = auto > 
< frame SRC = main. html МАМЕ = f main FRAMEBORDER = 0 SCROLLING = auto > 
</frameset > 
«/frameset > 
</html > 


(5) 设计 导航 文件 left. jsp. 
left. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" $^ 
<html> 
<body> 
< form action = "logincheck. jsp" method = post target = f main» 

学 号 : < input type = text папе = xh width = 5 >< br > 

机 号 : < input type = text name = jno ><br > 

< input type = submit value = "登录 " > 

</form>< hr > 
<a href = showip. jsp target = f_main > 全 部 学 生 </a><br><br> 
<a href = main. html target = f_main > 查看 说 明 </a><br><br> 
<a href = uploadfile. jsp target = _blank > 上 传 个 人 照片 </a ><br><br> 
<a href = infoupdate. jsp target = _blank > 编辑 个 人 信息 </a><br><br> 
</body> 
</html > 


(6) 设计 默认 主 窗口 文件 main. html, 
main. html 参考 代码 如 下 : 


<html> 
<body> 
«font size=4> 


说 明 : <p> 
请 在 左边 输入 自己 的 学 号 和 机 号 登录 。<p> 
登录 后 将 会 自动 地 将 你 的 IP 传 送 至 服务 器 中 。<p> 
虚拟 路 径 必须 为 : aa ; 入 口 文件 必须 是 : main. html; 链接 进入 自己 的 系统 <p> 
自动 生成 的 访问 路 径 是 : 你 的 ip ЯНЕ :8080/аа/паіп. html <p> 
</font > 
</body> 
</html> 


(7) 运行 系统 首页 index. html, 效 果 如 图 11-2 所 示 。 


JSP Teb MARU - Windows Internet Explorer [el xj 
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请 在 左边 输入 自己 的 学 号 和 机 号 登录 。 

登录 后 将 会 自动 地 将 你 的 IP 传 送 至 服务 器 中 。 

虚拟 路 径 必 须 为 : аа; 入 口 文件 必须 是 : main. html; 链接 进入 自己 的 系统 
自动 生成 的 访问 路 径 是 ， 你 的 ip 地 址 :8080/aa/main. html 


11-2 系统 index. html 首页 效果 


(8) 设计 显示 全 部 显示 信息 文件 showip. jsp。 
showip. jsp 参考 代码 如 下 : 
<% @ page contentType = "text/html; charset = utf -8" %> 


<% @ page import = "java. sql. *" %> 
< jsp:useBean id= "db" scope = "session" class = "bean. DBcon" /> 


< html > 
<head > 
<title> 显 示 全 部 信息 </title> 
</head > 
<body> 
<! -- 处 理 是 否 存在 照片 文件 ,如 果 没 有 , 则 使 用 默认 的 照片 -一 > 第 
< font size = "5" color = "blue"> 11 
当前 用 户 : <% = session.getAttribute("name") %> 学 号 : <% = session. getAttribute("xh") &»« p» = 
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</font> 
<% //photopath 为 上 传 照片 文件 路 径 
String ctxpath = this.getServletContext().getRealPath(""); // 项 目的 物理 路 径 
String photopath = ctxpath. substring(0, ctxpath. lastIndexOf("\\")) + "\\photo stuinfo\\"; 
String xh = (String)session. getAttribute("xh");  // 拿 到 登录 时 保存 在 session 中 的 学 号 
%> 
<b> 全 部 同学 简要 信息 
< % request. setCharacterEncoding( "utf - 8"); 
Connection con = db. getConnction(); 
Statement stmt = con. createStatement(); 
ResultSet rs - stmt.executeQuery("select * from stuinfo"); 


«table bgcolor = black > 
<tr bgcolor= yellow> 
<td><b>< div» <center> 照 片 </center ></div »«/b»«/td» 
<td><b>< div> < center > 学 号 </center ></div></b></td> 
<td><b>< div> <center> 姓 名 </center></div></b></td> 
<td><b><div> < center> 性 别 </center ></div></b></td> 
<td><b>< div> < center> 班 级 </center ></div></b></td> 
<td><b><div> < center > IP </center ></div ></b></td> 
< td»« b»« div> < center > 链接 </center ></div></b></td> 
< td><b>< div> <center> 机 号 </center » «/div ></b></td> 
</tr> 
<% 
String ls = null; 
while (rs. next()) 
{ 1s = "<a href = http://" + rs.getString("ip") + ":8080/aa/main.html target = blank > 浏览 
</a>"; 
%> 
< tr bgcolor = cyan > 
<td><b>< div> < center >< img src = /photo_stuinfo/<% = rs.getString("xh") % >. jpg 
alt = '<% = rs.getString("xh") % >. jpg' 
width = "90" height = "100"></center » «/div »«/b»«/td» 
<td><b>< div>< сепбег><% = rs.getString("xh") % ></сепїег ></div ></b></td> 
«td»«b»«div»«center»«5 = rs.getString("name") % ></center ></div ></b></td> 
«td»«b»«div»«center»«5* = rs.getString("sex") $»«/center ></div ></b></td> 
<td><b>< div>< center><% = rs.getString("dept") %></center ></div ></b></td> 
<td><b>< div>< center ><% = rs.getString("ip") $»«/center ></div ></b></td> 
<td><b>< div>< center ><% = 15 %></center ></div ></b></td> 
<td><b><div>< center >< % = rs.getString("jno") $»«/center ></div ></b></td> 
</tr> 
<% }%> 
</table><br> 
<% rs.close(); 
con. с1озе(); 
stmt. close(); 
%> </b> 
</body> 
</html > 


(9) 运行 显示 全 部 学 生 的 信息 列表 showip. jsp ,效果 如 图 11-3 所 示 。 


11-3 全 部 显示 信息 列表 showip. jsp 运行 效果 


(10) 设计 登录 验证 处 理 页 面 logincheck. jsp. 

该 文件 设计 思路 : 到 数据 库 查看 表单 提交 过 来 的 学 号 是 否 存在 ,如 验证 通过 , 则 将 学 号 
和 姓名 存 人 session 中 。 保 存 用 户 的 TP 地 址 的 目的 是 生成 “浏览 ”用户 项 目的 超 链接 。 

logincheck. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "UTF - 8" %> 
<% @ page import = "java. sql. *" %> 
< jsp:useBean id = "db" scope = "request" class = "bean. DBcon" /> 
<html> 
< body> 
<% 
Connection con = db. getConnction(); 
Statement stmt = con. createStatement(); 
ResultSet rs = stmt.executeQuery(" select * from stuinfo" +" where xh = '" + request. 
getParameter("xh") * "'"); 
if(!rs.next()) 


{ 
%> 
<b> < font size = 5 color = red> 
遗憾 !< p> 数 据 库 中 没有 [ <% = request. getParaneter("txt") &» ] 这 个 学 号 。 
</font ></b> 
<% } 
else { 


session. sethttribute("xh", request. getParameter("xh")); 
session. setAttribute( "name", rs. getString("name")); 
%> 
< center > 
<b> < font size = 5 color = blue><% = rs.getString("name") %> 同学 ,祝贺 你 登录 成 功 ! 
< hr ><br > </font> 
<p></p> 你 的 登录 学 号 是 : < font size = 4 color = blue > <% = request. getParameter("txt") 
%><br> 
<p></p> 你 的 实际 IP 地 址 是 : < font size = 4 color = blue» <% = request. getRemoteAddr ( ) 
%><br> 
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</font > 
</b></center > 
<% 
// 写 人 IP 
String strupd; // 更 新 数据 库 记 录 的 SQL 语句 
String jno = request. getParameter(" jno") ; 
strupd = "update stuinfo set ір = " + "'" + request. getRemoteAddr() + "'," +" јпо = '" + jno* "'" 
+" where xh = '"; 
strupd += request.getParameter("xh") + "'"; 
stmt. executeUpdate( strupd); 
} 
rs.close(); 
con. с1озе(); 
stmt. close(); 
$> 
</body> 
</html> 


(11) 设计 用 户 信息 更 新 表单 录 和 页面 infoupdate. jsp, 该 页 面 表单 中 的 学 号 和 姓名 字 
Вж“ Аі”. 
infoupdate. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" % > 
<% (à page import = 
< jsp:useBean id=" 
<html> 
<head> 
< title>My JSP 'infoupdate. jsp' starting page </title> 
</head> 
<body> 
<% 
if(null == session. getAttribute("xh")){ 
out. print(" 您 尚未 登录 ,请 登录 !"); 
} 
else 
{ 
request. setCharacterEncoding( "utf – 8"); 
Connection con = db. getConnction(); 
Statement stmt = con. createStatement(); 
String sql = "select * from stuinfo where xh- '" + session.getAttribute("xh") + "'"; 


ava. sql. *" &» 


Scope = "request" class = "bean. DBcon" /> 


ResultSet rs = stmt. executeQuery(" select * from stuinfo where xh = '" + session. 
getAttribute("xh") + "'"); 
rs.next(); 


%> 
当前 用 户 学 号 : <% = session. getAttribute("xh") %> 
姓名 : <% = session. getAttribute("name") %>< br> 
< form action = "infosave. jsp" method = "post"> 
< table border = "1"> 
<tr><td> 学 号 </td><td>< input буре = text папе = xh value = < % = rs. getString("xh") % > 
readonly = "readonly"></td></tr> 


<tr><td> 姓 名 </td>< td>< input type = text name = name value = <% = rs.getString("name") $» 
readonly = "readonly"></td></tr> 

<tr>< td> 班 级 </td>< td>< input type = text name = dept value =<% = rs. getString("dept") 
%>></td></tr> 

<tr><td> 密 码 «/td»« td>< input type = "password" name = passwd value = <% = rs. getString 
("passwd") => »«/td»«/tr» 

<tr><td> 性 别 </+а >< td>< input type = text name = sex value = <% = rs. getString(" sex") 
&»»«/td»«/tr» 

<tr>< td> 家 庭 住 址 «/td»« {а >< input type = text name = homeaddr value = <% = rs.getString 
("honeaddr") &» »«/td»«/tr» 

«tr»« td >H% # Ha if «/td > < td >< input type = text name = tele value = <% = rs. getString 
("tele") %> ></td></tr> 

«tr»«td»QQ-/td»« td>< input type = text name = qq value = <% = rs. getString("qq") % > > 
</td></tr> 

<tr >< а> Й </td >< td >< input type = text name = email value = <% = rs. getString 
("email") %> ></td></tr> 

<tr>< td> 备 注 </td>< td>< input type = text папе = note value =<% = rs. getString("note") 
%> ></td></tr> 

< tr >< td colspan = 2 >< input type = submit value = "保存 " > </td></tr> 
</table></form> 
<% 

} 

%> 

</body> 
</htm1> 


个 人 信息 填写 表单 如 图 11-4 所 示 。 


infoupdate. jsp’ starting page i 


GECER http://localhost: 8080/stuinfo/infoupd: 


当前 用 户 学 号 ，1313032060 姓名 ， 高 学 玉 


学 号 Feroz 
姓名 Ea 
BER rs 


EB 
ma F  — 
а алатоо | 


QQ 91363999 


[neis com 
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(12) 设计 保存 用 户 信息 的 页 面 infosave. jsp。 
infosave. jsp 参考 代码 如 下 : 


<% (à page language = "java" import = "java.util. * " pageEncoding = "utf 一 8" % > 
<% @ page import = "java. sql. *" %> 
< jsp:useBean id= "db" scope = "request" class = "bean. DBcon" /> 
<html> 
<head> 
<title> My JSP 'infosave. jsp' starting page </title> 
</head> 
<body> 
<% 
request. setCharacterEncoding("utf – 8"); 
Connection con = db. getConnction(); 
Statement stmt = con. createStatement(); 
// 写 人 
String strupd; // 更 新 语句 OK 
strupd = "update stuinfo set dept = " + "'" + request. getParameter("dept") +"',"; 
strupd +=" passwd = '" + request. getParameter("passwd") + "',"; 
strupd +=" sex = '" + request. getParameter("sex") + "',"; 
strupd +=" homeaddr = '" + request. getParameter("homeaddr") + "',"; 
strupd +=" tele = '" + request. getParameter("tele") + "',"; 
strupd +=" qq = '" + request.getParameter("qq") + "',"; 
strupd +=" email = '" + request.getParameter("email") +"',"; 
strupd +=" note = '" + request. getParameter("note") + "'"; 
strupd +=" where xh = '" + request.getParameter("xh") + "'"; 
stmt. executeUpdate( strupd) ; 
con. с1оѕе(); 
stnt.close(); 
out. print ("f& f£ R3] 1") ; 
%> 
<p><a href = index. html > 返回 主页 </a> 
</body> 
</html> 


(13) 设计 上 传 用 户 个 人 照片 的 页 面 uploadfile. jsp»uploadfile. jsp 参考 代码 如 下 : 


<% @ page language = "java" contentType = "text/html;charset = gb2312" %> 
<html> 
<head> 
<title> 文 件 上 传 </title> 
</head> 
< body bgcolor = "it FFFFFF" text = "it 000000" leftmargin = "0" topmargin = "40" marginwidth = 
"0" marginheight = "0"> 
<% 
if(null == session. getAttribute( "xh" ) ){ 
out. print(" 您 尚未 登录 ,请 先 登 录 !"); 
} 
else 


{ 


%> 
< center > 
<h2><% = session. gethttribute("name") %>, 您 好 ! 请 上 传 您 的 个 人 照片 </h2 > 
«form method="post" action = "FileUpload" ЕМСТҮРЕ = "nultipart/form- data"> 
< table border = "3" width = "550" cellpadding = "4" cellspacing = "2" bordercolor = " # 9BD7FF"> 
<tr><td> 当 前 登录 用 户 :</td><td align = "center">< font size = "4" color = "blue"> 
学 号 : <% = session. gethttribute("xh") %> 姓名 : <% = session. getAttribute("name") %> 
</font ></td></tr> 
<tr><td> 请 选择 照片 文件 : </td>< td» < input name = "filel" size- "40" type= "file"> 
</td></tr> 
<tr><td align = "center" colspan = 2 >< font size = "3" color = "red"> 
请 注意 : 照片 文件 必须 小 于 100KB, 且 为 jpg 格式 。</font></td></tr> 
<tr><td align = "center" colspan = 2 >< input type = "submit" name = "submit" value = "Jf 
始 上 传 "/></td></tr> 
</table> 
</form> 
</center > 
<%} %> 
</body> 
</html> 


上 传 用 户 个 人 照片 的 uploadfile. jsp 运行 效果 如 图 11-5 所 示 。 


文件 上 传 t Explorer 


高 玉 ， 您 好 ! 请 上 传 您 的 个 人 照片 


当前 登录 用 户 : 学 号 : 1313032060 姓名 : 高 = 


请 选择 照片 文件 ， mur rust 
请 注意 ， 照 片 文件 必须 小 于 100KB, 且 为 jpg 格 式 。 


11-5 上 传 照片 文件 表单 


项 目 实 训 2 使 用 JXL 操作 Excel 文件 


【实验 内 容 】 


设计 一 个 运用 JXL 组 建 读 取 Excel 文件 的 JSP 项 目 应 用 项 目 ,主要 内 容 是 将 Excel 表 
中 的 学 生 名 单 信息 读 入 到 数据 库 中 。JXL 是 Java Excel 的 缩写 , 它 是 一 个 Java 读 写 Excel 
文件 的 工具 类 ,简单 易 用 。 

项 目 需要 设计 的 文件 及 其 功能 说 明 如 表 11-1 Brzn o 


A A X 


JSP Web # K X E AA B 3: ists 


表 11-1 项 目 文件 及 其 功能 列表 


文件 位 置 与 名 称 文件 功能 
src/ bean/DBcon. java 访问 数据 库 的 工具 类 (JavaBean) 
130 src/bean/Stu xls. java 学 生 实体 类 (JavaBean) ,由 于 封装 实体 信息 


处 理 Excel 的 工具 类 ,提供 如 下 方法 : List ReadExcel(File f_ 
xls) „void showxls(List stulist) , void SaveToDB(List stulist) 
接收 浏览 器 传 来 的 XLS 文件 ,并 保存 到 服务 器 上 ; 调用 
src/servlet/ExcelUploadServlet. java ExcelManage 的 ReadExcel 方法 , 读 取 Excel 单元 格 ; 调用 
ExcelManage 的 SaveToDB 方法 ,将 Excel 数据 存 人 数据 库 
Web 项 目 路 径 /chl1/jxl/readexcel. jsp 用 户 上 传 Excel 文 件 的 界面 

Web 项 目 路 径 /chl1/jxl/reslist. jsp 上 传 结果 的 界面 

需要 导入 的 JAR 包 : jxl. jar( 用 来 读 取 Excel 数据 ) .jspsmartupload. jar( 用 于 获取 上 传 的 文件 ) .mysqL- 
connector-java-5. 1. 5-bin. jar(JDBC 驱动 ) 


src/util/ ExcelManage. java 


【设计 步骤 】 


COD 创建 项 目 , 导 入 相应 的 JAR 包 (jxl. jar、jspsmartupload. jar, mysql-connector-java- 
5. 1. 5-bin. jar) 。 
(2) 准备 要 导入 的 Excel 文件 ,文件 “学 生 名 单 . xls? 示 例 内 容 如 图 11-6 Bron o 


jsj0000010 


图 11-6 即将 导入 数据 库 的 Excel 表 
G) 创建 数据 库 ,数据 库 表 为 stu_jxl, 表 结构 如 图 11-7 所 示 。 


[Ici 


图 11-7 数据 库 中 学 生 表 stu јх 结构 


(4) 设计 实体 类 (JavaBean) ,用 于 封装 实体 信息 。Stu_xls. java 参考 代码 如 下 : 


package bean; 

public class Stu xls { 

private String xh; 

private String name; 

private String sex; 

private String dept; 

private String type; 

private String project; 

public String getSex() { return sex; } 

public void setSex(String sex) [(this.sex = sex; } 
public String getXh() (return xh; } 

public void setXh(String xh) (this.xh = xh; ) 

public String getName() (return name; } 

public void setName(String name) {this.name = name; } 
public String getDept() { returndept; ) 

public void setDept(String dept) { this.dept = dept;} 
public String getType() (return type; } 

public void setType(String type) { this. type 
public String getProject() (return project;] 
public void setProject(String project) {this. project = project; } 
! 


(5) 设计 访问 数据 库 的 工具 类 (JavaBean) ,用 于 连接 数据 库 。DBcon. java 参考 代码 
ШЕ: 


package bean; 
import java. sql. Connection; 


type;] 


import java. sql. DriverManager; 
import java. sql. PreparedStatement; 
import java. sql. ResultSet; 
import java. sql. SQLException; 
public class DBcon ( 
private static final String DRIVER CLASS = "com. mysql. jdbc.Driver"; 
private static final String DATABASE URL = 
" jdbc : mysql : //1ocalhost:3306/books?useUnicode = true&characterEncoding = utf – 8"; 
private static final String DATABASE USRE - "root"; 
private static final String DATABASE PASSWORD - "123"; 


public static Connection getConnction() ( // 返 回 连接 
Connection dbConnection = null; 
try ( 


Class.forName(DRIVER CLASS); 
dbConnection = DriverManager.getConnection(DATABASE URL, 
DATABASE USRE, DATABASE PASSWORD);] 
catch (Exception e) (e.printStackTrace(); } 
return dbConnection;] 
public static void closeConnection(Connection dbConnection) ( // 关 闭 连 接 
try { 第 
if (dbConnection != null && (!dbConnection. isClosed())) { dbConnection.close();} 11 
} catch (SQLException sqlEx) (sqlEx.printStackTrace();] =< 
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) 
public static void closeResultSet(ResultSet res) ( // 关 闭 结 果 集 
try{ if (res (= null) ( 
res.close(); 
res = null; 
) 
} catch (SQLException e) (e.printStackTrace();) 
) 
public static void closeStatement(PreparedStatement pStatement) { 
try ( 
if (pStatement != null) { 
pStatement.close(); 
pStatement - null; 
) 
} catch (SQLException e) (e. printStackTrace();] 
} 
} 


(6) 设计 处 理 Excel 的 工具 类 ExcelManage. java, 该 类 提供 如 下 方法 : 

List ReadExcel(File f. xls): 从 给 定 的 Excel 文件 中 读 取 单 元 格 ,封装 为 实体 对 象 , 存 
入 List 集合 类 容器 中 。 

void showxls(List stulist) : 供 调 试 时 使 用 ,将 保存 在 List 的 Excel 内 容 显 示 在 控制 
台 上 。 

void SaveToDB(List stulist) : 将 已 经 由 ReadExcel() 方 法 读 取 并 保存 在 List 的 Excel 
内 容 存 人 数据 库 。 

ExcelManage. java 参考 代码 如 下 : 


package util; 
import java. io. File; 
import java. io. IOException; 
import java. sql. Connection; 
import java. sql. PreparedStatement; 
import java. sql. SQLException; 
import java. util. ArrayList; 
import java. util. List; 
import jxl.Cell; 
import jxl.Sheet; 
import јх]. Workbook; 
import jxl. read. biff. BiffException; 
import bean. DBcon; 
import bean. Stu_xls; 
public class ExcelManage { 
f *** 从 表 stu. xls 中 读 取 内 容 保存 到 List 中 */ 
public List ReadExcel(File f xls){ 
List stulist = new ArrayList(); 
try f 
//this.deleteTable A(); 
Workbook book = Workbook.getWorkbook(f xls); 
Sheet sheet - book.getSheet(0); 


for(int i = 1;i< sheet.getRows();i++)( // 逐 行 读 取 
Cell[] cells = sheet. getRow(i); // 获 得 工行 的 所 有 的 单元 格 
Stu xls stu = new Stu xls();  // 将 该 行 单元 格 的 内 容 包装 为 一 个 对 象 , 放 入 List 中 
stu. setXh(cells[0].getContents()); 
stu. setNane(cells[1].getContents()); 
stu. setSex(cells[2].getContents()); 
stu. setDept(cells[3].getContents()); 
stu. setType(cells[4].getContents()); 
stu. setProject(cells[5].getContents()); 
stulist.add(stu); 
) 
} catch (BiffException e) (e. printStackTrace(); 
) catch (IOException e) (e. printStackTrace(); 
) 
return stulist; 
) 
/ ++ 
x 在 控制 台 上 显示 读 取 的 xls 数据 , 供 调试 时 调用 
* xls 数据 是 通过 ReadExcel(File f_xls) 方 法 读 取 的 ,xls 保存 在 List 中 
*/ 
public void showxls(List stulist){ 
Stu xls stubean = null; 
for(inti-0;i«stulist.size();i**) 
{ stubean- (Stu xls)stulist.get(i); // 逐 一 获取 List 中 的 学 生 
System. out. print(stubean. getXh( ) +" -- "); 
System. out. print(stubean.getName() +" -- "); 
Systen. out. print(stubean. getSex() * " -- "); 
System. out. print(stubean.getDept() *"-- "); 
System. out. print(stubean.getType() +" -- "); 
System. out. println(stubean.getProject()); 


j 
/xx 
ж 将 List 中 的 学 生 信息 , 写 入 MySQL 数据 库 (student) 表 "stu_jx1" 中 
*/ 
public void SaveToDB(List stulist) throws SQLException{ 
Connection conn = null; 
PreparedStatement stmt = null; 
try { 
conn = DBcon.getConnction(); 
String sql = "insert into stu_jxl values(?,?,?,?,?,?)"; 
stmt = conn. prepareStatement( sql); 
Stu_xls stubean = null; 
for(int i= 0;i< stulist. size();i++) 
{ stubean = (Stu_xls)stulist. get(i); // 逐 一 获取 List 中 的 学 生 学 号 
stmt. setString(1, stubean.getXh()); 
stmt.setString(2, stubean.getName()); 
stmt.setString(3, stubean.getSex()); 
stmt.setString(4, stubean.getDept()); 第 
stmt.setString(5, stubean.getType()); 11 
stmt.setString(6, stubean.getProject()); = 
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stmt.executeUpdate(); — // 逐 一 将 获取 的 学 生 信 息 保 存 到 数据 库 中 


) 
) catch (SQLException e) { e.printStackTrace(); 
)finally( conn.close(); 
$ 
} 
} 


(7) 设计 接收 readexcel. jsp 通过 文件 表单 传 来 XLS 文件 的 Servlet 类 ,该 类 接收 浏览 
器 传 来 的 XLS 文件 ,并 先 将 Excel 文件 保存 到 服务 器 上 ; 然后 调用 ExcelManage 工具 类 的 
ReadExcel() 方 法 , 读 取 Excel 单元 格 , 得 到 由 单元 格 信息 封装 的 实体 对 象 组 成 的 List 集合 ; 
再 调用 ExcelManage 的 SaveToDB() 方 法 ,将 含有 Excel 单元 格 数据 信息 的 List 集合 内 容 
存 人 数据 库 ; 最 后 转发 到 reslist. jsp 显示 结果 。ExcelUploadServlet. java 参考 代码 如 下 : 


/ ж 接收 浏览 器 传 来 的 XLS 文件 ,并 保存 到 服务 器 上 * / 
package servlet; 
import java. io. IOException; 
import java. io.PrintWriter; 
import java.util.List; 
import java.util.Set; 
import javax. servlet. ServletException; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import util. ExcelManage; 
import com. jspsmart. upload. File; 
import com. jspsmart. upload. Files; 
import com. jspsmart. upload. SmartUpload; 
public class ExcelUploadServlet extends HttpServlet ( 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
this.doPost(request, response); 
] 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException ( 
SmartUpload su = new SmartUpload(); 
su. initialize(this.getServletConfig(), request, response); 
String path- this.getServletContext().getRealPath(""); 
path = path. substring(0, path. indexOf("webapps") + "webapps". length()) + "WV jsppracticeV 
\xlsupfile\\"; 
try ( 
su. setAllowedFilesList("xls"); 
su. upload(); 
java. io. File filel = new java. io. File(path + "stu. xls"); 
if(filel.exists())(filel.delete();]) 
Files file = su.getFiles(); 
File fl = file.getFile(0); 
fl.savehs("./xlsupfile/stu.xls", File.SAVEAS VIRTUAL); // 上 传 的 xis 保存 到 服务 器 
java. io. File file2 = new java. io. File(path + "stu. xls"); 
ExcelManage em - new ExcelManage(); 


List stu_list = em.ReadExcel(file2); // 读 取 服 务 器 上 的 xls 到 List 中 
//em. showxls(stu list); // 在 控制 台 上 显示 , 仅 在 调试 时 使 用 


em. SaveToDB(stu list); // 将 来 自 х15 文件 的 List 中 的 数据 保存 到 数据 库 中 
request.getSession().setAttribute("reslist", stu list); 


request. getRequestDispatcher(" /ch11/jxl/reslist. jsp"). forward(request, response); 
) catch (Exception e) ( 
request. getRequestDispatcher(" /ch11/jxl/error. jsp"). forward(request, response); 


} 
} 


(8) 设计 供用 户 上 传 Excel 文件 的 界面 文件 readexcel. jsp, 提 供 了 上 传 文件 的 表单 , 表 
单 提 交 给 ExcelUploadServlet 处 理 。readexcel. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "gbk" % > 
<% 
String path = request.getContextPath(); 
String basePath = request. getScheme ( ) + "://" + request. getServerName ( ) + ":" + request. 
getServerPort() + path + "/"; 
$> 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
< head> 
< base href = "< % = basePath % >"> 
<title> 读 取 Excel 表 </title> 
</head > 
<body> 
<div align = "center"> 
< fieldset style = "width: 400"> 
< legend > À Excel </legend> 
< form action = "/jsppractice/ExcelUploadServlet" name = " myform" method = " post" enctype = 
"multipart/form- data"> 
< table border = "1"> 
<tr><td> 选 择 学 生 名 单 < br > 添加 到 数据 库 中 </td> 
<td> < input type= "file" name= "xlsfile" value= "浏览 "> </td></tr> 
<tr>< td colspan = "2" align = "center"> 
< span jd = "mes" style = "color: blue"> 等 待 用 户 选 择 xls 文件 ...</span></td></tr> 
<tr>< td colspan = "2" align = "center"> 
< input type = "button" value = "导入 到 数据 库 ”onclick = "upload()"></td></tr> 
</table> 
</form> 
</fieldset > 
</div> 
</body> 
< script type = "text/javascript"> 
function upload()( 
var testfile = /\. (xls) + $/; 
var fxls = document. myform. xlsfile. value; 


if(fxls == "")( alert(' 请 选择 要 上 传 的 Excel X! '); 第 
Jelse if(!testfile. test(fxls)){alert( ' 您 选择 的 表 必 须 为 Excel 文件 '); 11 
}else{ =< 
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document. getElementById("mes"). innerText = "正在 导入 文件 ,请 稍 后 .….."; 
document. myform. submit(); } 
ма. 
</html > 
(9) 设计 显示 用 户 上 传 Excel 文件 结果 的 reslist. jsp。 这 里 ,首先 显示 了 直接 读 取 的 
Excel 数据 ; 然后 ,将 数据 库 信息 显示 出 来 ,让 用 户 进行 比 对 ,看 上 传 的 Excel 设计 与 数据 库 
中 的 数据 是 否 一 致 。 用 户 在 readexcel. jsp 页 面 上 单 击 “ 导 入 到 数据 库 ” 按 钮 ,提交 给 
ExcelUploadServlet 处 理 后 ,结果 信息 在 reslist. jsp 中 显示 ,页 面 上 半 部 分 显示 服务 器 读 到 
的 Excel 信息 ,下 半 部 分 显示 从 数据 库 读 出 的 信息 ,用 户 通过 对 比 可 查看 到 上 传 的 Excel 单 
元 格 数据 是 否 已 存 人 数据 库 中 ,也 直接 可 打开 数据 库 查看 运行 结果 。reslist. jsp 参考 代码 
AT: 


<% @ page language = "java" import = "java.util. * " pageEncoding = "gbk" % > 
<% @page import = "bean. Stu xls, java. sql. * " %> 

< jsp:useBean id = "db" class = "bean. DBcon" scope = "request" /> 

<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 


<html> 
<head> < title> Excel 文件 导入 结果 </title> </head> 
< body> 
<! -- 首先 直接 显示 由 Servlet 读 取 的 xls 文件 信息 --> 
<% 


List reslist = (List)request.getSession().getAttribute("reslist"); 
Set set = new HashSet(); 
第 > 
< table border = "1" bordercolor = "black" style = "border - collapse: collapse; font - size: 
0.8em;"> 
< tr bgcolor = " # bbff99" align = "center"> 
< td colspan = "6" > 由 Servlet 读 取 的 xis 文件 信息 如 下 </td> </tr> 
< tr bgcolor = " # ddcc99" align = "center"> 
<td><b> 学 号 </b></td> <td><b> 姓 名 </b></td> 
<td><b> 性 别 </b></td> <td><b> 班 级 </b></td> 
<td><b> 类 别 </b></td> <td><b> 专 业 </b></td> 
</tr> 
<% 
for(int i = 0;i< reslist.size();i++)( 
Stu xls stubean = (Stu xls)reslist.get(i); 
LES 
<tr> 
«td align = "center"><% = stubean.getXh() %></td> 
< td align = "сепіег"><% = stubean.getName() %></td> 
< td align = "center"><% = stubean. getSex() %></td> 
< td align = "center"><% = stubean.getDept() %></td> 
< td align = "center"><% = stubean.getType() %></td> 
«td align = "center"><% = stubean. getProject() %></td> 
</tr> 
<% 
) 


%> 
<! -- 以 下 显示 从 数据 库 中 读 取 的 导入 信息 --> 
<% 
Connection сопп = db.getConnction(); 
String sql = "select * from stu jxl"; 
Statement stmt - conn.createStatement(); 
ResultSet stuset = stmt. executeQuery(sql); 
%> 
< table border = "1" bordercolor = "black" style = "border - collapse: collapse; font - size: 
0. 8em; "> 
< tr bgcolor = " # ffbb99" align = "center"> 
< td colspan= "6" > 从 数据 库 中 读 取 的 信息 如 下 </td> </tr> 
< tr bgcolor = " # ccdd99" align = "center"> 
<td><b> 学 号 </b></td> <td><b> 姓 名 </b></td> 
<td><b> 性 别 </b></td> <td><b> 班 级 </b></td> 
<td><b> 类 别 </b></td> <td><b> 专 业 </b></td> 
</tr> 
<% while(stuset.next())( %> 
<tr> 
< td align = "сепіег"><% = stuset.getString(1) %></td> 
< td align = "сепіег"><% = stuset.getString(2) %></td> 
< td align = "сепіег"><% = stuset.getString(3) %></td> 
«td align = "center"><% = stuset.getString(4) %></td> 
«td align = "center"><% = stuset.getString(5) %></td> 
< td align = "center"><% = stuset.getString(6) &»«/td» 
</tr> 
<% } %> 
<font color = red><br > 注意 : 如 果 数 据 库 中 已 含有 要 导入 的 "学 号 "记录 , 则 不 能 导 和 人 , 需 删除 重 
复 记录 后 再 导入 !</font> 
</body> 
</html> 


(10) 输入 URL .readexcel. jsp 运行 效果 如 图 11-8 所 示 。 


ttp: 7/1ocalhost:8080/jsppractice/chl1/jxl/readexcel. jsp 


导入 Excel 
заа | = Г " 
添加 到 数据 库 中 [Е:\+ег+\}х1\4зКа\ ЕЙ. xIs AR... | 
等待 用 户 选择 xls 文 件 .. . 
导入 到 数据 库 | 


11-8 上 传 Excel 文件 表单 界面 


Servlet 成 功 读 取 上 传 的 Excel 文件 效果 如 图 11-9 所 示 。 

下 面 是 调试 时 在 控制 台 上 输出 读 取 到 的 Excel 数据 。 调 试 时 在 ExcelUploadServlet 中 
调用 由 ExcelManage 提供 的 void showxls( List stulist) 方 法 ,可 在 控制 台 上 显示 服务 器 读 
到 的 Excel 信息 。 服 务 器 成 功 读 取 Excel 文件 在 控制 台 上 的 输出 信息 效果 如 图 11-10 | 第 
所 示 。 P. 


A HX 
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Fe /[1ocalhost:8080/ j sppracti ce/ExcelUploadServlet xi] 


122700000018] 
2270000002] 
220000003} 
2270000004 
2210000005] 
7270000006] 
230000007 
2270000008) 
7300000092 


jsj0000010| 王 十 洁 | 


[510000003 ЖЇН Ў 
jsj0000004 
20000005 
2230000006 
520000007 | P 
270000008 | 
isj0000009| 武 点 辞 | 
1s10000010| 王 雨 洁 | 


jsj0000001-- 张 小 丽 -- 女 --JSJ001-- 工 科 -- 计 算 机 科学 与 技术 
女 --JSJ001-- 工 科 -- 计 算 机 科学 与 技术 
男 --JSJ002-- 工 科 -- 网 络 工程 
-JSJ002-- 工 科 -- 网 络 工程 
男 --JSJ003-- 工 科 -- 物 联网 工程 


jsj0000007-- 顾 金 春 -- 男 --JSJ004-- 工 科 -- 软 件 工 程 
jsj0000008-- 张 严 莉 -- 女 --JSJI004-- 工 科 -- 软 件 工程 
jsj0000009-- 武 点 静 -- 男 --JSJ004-- 工 科 -- 软 件 工程 
jsj0000010-- 王 雨 洁 -- 女 --JSJ004-- 工 科 -- 软 件 工程 


图 11-10 服务 器 成 功 读 取 Excel 文 件 在 控制 台 上 的 输出 信息 


项 目 实 训 3 使 用 JFreeChart 显示 动态 曲线 


JFreeChart Ж Java 平台 上 的 一 个 开放 的 图 表 绘 制 类 库 。 它 完全 使 用 Java 语言 编写 ， 
是 为 Applications、Applets、Servlets 以 及 JSP 等 使 用 所 设计 。JFreeChart 可 生成 饼 图 (Pie 
Charts) ,时 序 图 (Time Series) ,柱状 图 (Bar Charts) 、 散 点 图 (Scatter Plots)、 甘 特 图 (Gantt 
Charts) 等 多 种 图 表 , 并 且 可 以 产生 PNG 和 JPEG 格式 的 输出 ,还 可 以 与 PDF 和 Excel 关 
联 。JFreeChart Java 图 表 库 是 一 个 100% 免 费 的 开源 项 目 ,能 够 在 Swing 和 JSP Web 中 制 
作 自 定义 的 图 表 或 报表 ,应 用 广泛 。 


[2 3 5] 


(1) 下 载 JFreeChart 开源 jar 包 。 

JFreeChart 是 开放 源 代 码 的 免费 软件 ,其 下 载 地 址 为 http://sourceforge. net/ 
projects/jfreechart/files/ 。 它 解压 后 有 如 下 文件 夹 : 

(D source 文件 夹 : 为 jfreechart 的 源码 目录 。 

© lib 文件 夹 : 为 包 目 录 , 需 要 关注 的 包 为 jfreechart-1. 0. 13. jar、gnujaxp. jar 和 
jcommon-1.0. 16.jar 这 3 个 包 。 

© 根 目录 下 的 jfreechart-demo. jar 是 例子 程序 ,双击 该 jar 文件 后 可 看 到 其 中 各 种 图 
表 例 子 的 运行 结果 ,如 图 11-11 所 示 。 


[SD іо хі 
Eile Edit Theme 
| [pemos | Memory Usage | Source Code 


国 AnnotationDemo1 java Line Chart Demo 4 


[F LinechartDemo1 java 
国 LineChartDemo2 java 
[F LineChartDemo3 java > 
Б LinechartDemo4 ја 

[P LineChartDemos5 java 
国 LineChartDemo6 java 
国 LinechartDemo7 java 
国 LineChartDemo8 java 
国 LineChart3DDemot java 


онон № 


Р 11-11 jfreechart-demo 图 形 示 例 


(2) 编写 使 用 JFreeChart 生成 柱状 图 的 JSP 应 用 程序 。 

(D 在 MyEclipse 中 创建 一 个 名 为 jfreechartdemo 的 Web 工程 。 

© 将 下 载 的 JFreeChart F lib 目录 下 的 jar 包 复 制 到 WebRoot/ WEB-INF/lib 目录 下 ， 
如 图 11-12 所 示 。 


白 - 留 Jfreechartdeno 
B sre 
| -A JRE System Library [MyEclipse Т. 0M1] 
| 89-084 Java EE 5 Libraries 
1 ÉM Referenced Libraries 
| | Ë jconmon-1.0.23. jar 


划 Char tDeleter. class 
d) DisplayChart. class 
di) Servi etltilities. class 
9-88 org. jfree. chart. title 


11-12 项 目 结构 及 jfreechart. jar 中 的 Servlet 
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© 由 于 应 用 程序 是 直接 调用 JFreeChart 提供 的 ServletCDisplayChart. class) 生 成 图 表 
的 ,因此 ,需要 在 web. xml 文件 中 增加 Servlet 配置 项 : 


<servlet> 
< servlet - папе > DisplayChart «/servlet – name > 
< servlet - class > org. jfree. chart. servlet. DisplayChart «/servlet - class > 
</servlet > 
< servlet - mapping > 
< servlet - папе > DisplayChart </servlet – name > 
< url- pattern»/DisplayChart «/url- pattern? 
«/servlet - mapping > 


CD 编写 显示 柱状 图 的 barchart. jsp 文件 ,barchart. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf - 8" %> 
<% (à page import = " 
org. jfree. chart. ChartFactory, 
org. jfree. chart. JFreeChart, 
org. jfree. chart. servlet.ServletUtilities, 
org. jfree. data. category. CategoryDataset, 
org. jfree. data. genera1. DatasetUtilities, 
org. jfree. chart. plot. * , 
org. jfree. chart. labels. * , 
org. jfree. chart. renderer. category. BarRenderer3D, 
java.awt. * , 
org.jfree.ui. *, 
org.jfree.chart.axis. *"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 
request.getServerPort() + path + "/"; 
%> 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
< base href = "< % = basePath % >"> 
<title> barchart. jsp </title> 
</head> 
<body> 
<% 
double[][] data = new double[][] ( 
( 1310, 1220, 1110, 1000}, 
( 720, 700, 680, 640 ), 
( 1130, 1020, 980, 800}, 
{ 440, 400, 360, 300 } ); 
String[] rowKeys = ( "ЖЯ", "EX", "KE", "小麦 " }; 
String[] columnKeys = ( "南通 ", "苏州 ", "无 锡 "," 南 京 ”}; 
CategoryDataset dataset = DatasetUtilities. createCategoryDataset ( rowKeys, 
columnKeys, data); 


JFreeChart chart = ChartFactory. createBarChart3D(" 粮 食 销量 统计 图 "， 
" 主 粮 销量 统计 "，" 销 量 "，dataset，PlotOrientation. VERTICAL, true, true, 
false); 
//*x 这 段 解决 汉字 乱码 问题 
CategoryPlot plot = chart.getCategoryPlot(); // 获 取 图 表 区 域 对 象 
CategoryAxis domainAxis = plot.getDomainAxis(); // 水 平底 部 列表 
domainAxis. setLabelFont(new Eont(" 黑 体 "，Font. BOLD, 14)); // 水 平底 部 标题 
domainAxis. setTickLabelFont(new Font(" 宋 体 "，Font. BOLD,12)); // 垂 直 标题 
ValueAxis rangeAxis = plot.getRangeAxis(); // 获 取 柱 状 
rangeAxis. setLabelFont(new Font(" 黑 体 "，Font. BOLD, 15)); 
chart. getLegend(). setItemFont(new Font(" M [K", Font. BOLD, 15)); 
chart. getTitle().setFont(new Font(" 宋 体 "，Font. BOLD，20) );// 设 置 标题 字体 
// жж 到 这 里 结束 
// 设 置 网 格 背 景 颜色 
plot. setBackgroundPaint(Color. white); 
// 设 置 网 格 竖 线 颜 色 
plot. setDomainGridlinePaint(Color.pink); 
// 设 置 网 格 横 线 颜色 
plot. setRangeGridlinePaint(Color. pink); 
// 显 示 每 个 柱 的 数值 ,并 修改 该 数值 的 字体 属性 
BarRenderer3D renderer = new BarRenderer3D(); 
renderer. setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator()); 
renderer. setBaseItemLabelsVisible(true); 
// 默 认 的 数字 显示 在 柱子 中 , 通过 如 下 两 句 可 调整 数字 的 显示 
// 注 意 , 此 句 很 关键 , 若 无 此 句 , 那 数字 的 显示 会 被 覆盖 ,数字 没有 显示 
renderer. setBasePositiveltemLabelPosition(new ItemLabelPosition( 
ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE LEFT)); 
renderer. set ItenLabelAnchorOffset(10D); 
// 设 置 每 个 地 区 所 包含 的 平行 柱 的 之 间距 离 
//renderer. setItemMargin(0.3); 
plot. setRenderer(renderer); 
// 设 置地 区 、 销 量 的 显示 位 置 
// 将 下 方 的 " 肉 类 " 放 到 上 方 
plot. setDomainAxisLocation(AxisLocation. TOP OR RIGHT); 
// 将 默认 放 在 左边 的 "销量 " 放 到 右 方 
plot. setRangeAxisLocation(AxisLocation. BOTTOM OR RIGHT); 
String filename - ServletUtilities. saveChartAsPNG(chart, 700, 400, null, session); 
String graphURL = request.getContextPath() + "/DisplayChart?filename =" + filename; 
$> 
< img src="<% = graphURL% >" width = 700 height = 400 border = 0 usemap =" # <% = 
filename %>"> 
</body> 
</html> 


© 在 地 址 栏 输入 http://localhost: 8080/Jfreechartdemo/barchart. jsp. 运行 效果 如 
图 11-13 所 示 。 


(3) 编写 使 用 JFreeChart 生成 时 序曲 线 图 的 JSP 应 用 程序 。 : 
Ф 编写 Servlet 程序 ,绘制 时 序曲 线 图 (Time Series Chart), f£ src. 下 的 Servlet 包 中 x 
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barchart. js; 


- Window 


Internet Explorer 


SO mmo ese mee E) 


粮食 销量 统计 图 
主 粮 销量 统计 


图 11-13 柱 形 图 效果 


新 建 一 个 绘制 时 序曲 线 图 的 Servlet 程序 (LineChartServlet. java) 。 
LineChartServlet 参考 代码 如 下 : 


package servlet; 


import java. іо. IOException; 


import javax. servlet. ServletException; 


import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import java. awt. Color; 

import java. awt. Font; 

import java. io.FileNotFoundException; 

import java. io.FileOutputStream; 

import java. io. OutputStream; 


import org. 
import org. 
import org. 
import org. 
import org. 
import org. 
import org. 
import org. 
import org. 


jfree. 
jfree. 


jfree. 
jfree. 
jfree. 
jfree. 
jfree. 
jfree. 
jfree. 


. chart. ChartFactory; 
.chart.ChartUtilities; 
chart.JFreeChart; 

chart. StandardChartTheme; 
chart. plot. XYPlot; 

data. time. Month; 

data. time. TimeSeries; 

data. time. TimeSeriesCollection; 
data. xy. XYDataset; 


public class LineChartServlet extends HttpServlet { 
public LineChartServlet() { 
super(); 


) 

public void destroy() { 
super. destroy(); 

) 

private static JFreeChart createChart(XYDataset paramXYDataset) { 
// жээ жэ ээ эк эе э эе э ЭЕ э э э EE эе э ЭЕ э э э эе э э э эе эе э эе эе K э Ж э эе KEK э э KEK э э э K X 
// 解 决 中 文 乱 码 
StandardChartTheme standardChartTheme = new StandardChartTheme("JFree"); // 或 为 Legacy 
standardChartTheme. setRegularFont(new Font(" 宋 体 "，Font. BOLD, 12)); 
standardChartTheme. setExtraLargeFont(new Font(" 宋 体 ", Font. BOLD, 12)); 
standardChartTheme. setSmallFont(new Font(" 宋 体 "，Font. BOLD, 12)); 
standardChartTheme. setLargeFont(new Font(" 宋 体 "，Font. BOLD, 12)); 
ChartFactory. setChartTheme( standardChartTheme) ; 
// жээк жэ эээ эе эе эе эе ЭЕ э эе э ЭЕ э эе э ЭЕ э эе э ЭЕ э ЭЕ эе э э ээ э э э ЭЕ эк э э эе эе ээ э ээ Ж 
JFreeChart localJFreeChart = ChartFactory.createTimeSeriesChart( 
"价格 走势 图 "，" 时 间 "，" 单 价 ",paramXYDataset，false，false，false) ; 
XYPlot localXYPlot = (XYPlot) localJFreeChart. getPlot(); 
localXYPlot. setBackgroundPaint (Color. YELLOW) ; 
localXYPlot. setDomainGridlinePaint(Color. BLACK); 
localXYPlot. setRangeGridlinePaint(Color. BLUE); 
return (JFreeChart) localJFreeChart;] 

private static XYDataset createDataset() ( 
TimeSeries localTimeSeriesl = new TimeSeries("a"); 
localTimeSeriesl.add(new Month(1, 2014), 184D); 
localTimeSeriesl.add(new Month(2, 2014), 187D); 
localTimeSeriesl.add(new Month(3, 2014), 192D); 
localTimeSeriesl.add(new Month(4, 2014), 202D); 
localTimeSeriesl.add(new Month(5, 2014), 201D); 
localTimeSeriesl.add(new Month(6, 2014), 188D); 
localTimeSeriesl.add(new Month(7, 2014), 192D); 
localTimeSeriesl.add(new Month(8, 2014), 191D); 
localTimeSeriesl.add(new Month(9, 2014), 194D); 
localTimeSeriesl.add(new Month(10, 2014), 201D); 
localTimeSeriesl.add(new Month(11, 2014), 205D); 
localTimeSeriesl.add(new Month(12, 2014), 206D); 
localTimeSeriesl.add(new Month(1, 2015), 216D); 
localTimeSeriesl.add(new Month(2, 2015), 218D); 
localTimeSeriesl.add(new Month(3, 2015), 215D); 
localTimeSeriesl.add(new Month(4, 2015), 223D); 
localTimeSeriesl.add(new Month(5, 2015), 235D); 
localTimeSeriesl.add(new Month(6, 2015), 242D); 
localTimeSeriesl.add(new Month(7, 2015), 237D); 
TimeSeries localTimeSeries2 - new TimeSeries("b"); 
localTimeSeries2.add(new Month(1, 2014), 144D); 
localTimeSeries2.add(new Month(2, 2014), 146D); 
localTimeSeries2.add(new Month(3, 2014), 151D); 
localTimeSeries2.add(new Month(4, 2014), 153D); 
localTimeSeries2.add(new Month(5, 2014), 144D); 
localTimeSeries2.add(new Month(6, 2014), 150D); 
localTimeSeries2.add(new Month(7, 2014), 148D); 
localTimeSeries2.add(new Month(8, 2014), 150D); 
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localTimeSeries2.add(new Month(9, 2014), 151D); 
localTimeSeries2.add(new Month(10, 2014), 153D); 
localTimeSeries2.add(new Month(11, 2014), 158D); 
localTimeSeries2.add(new Month(12, 2014), 157D); 
localTimeSeries2.add(new Month(1, 2015), 163D); 
localTimeSeries2.add(new Month(2, 2015), 163D); 
localTimeSeries2.add(new Month(3, 2015), 162D); 
localTimeSeries2.add(new Month(4, 2015), 167D); 
localTimeSeries2.add(new Month(5, 2015), 170D); 
localTimeSeries2.add(new Month(6, 2015), 175D); 
localTimeSeries2.add(new Month(7, 2015), 171D); 
TimeSeriesCollection localTimeSeriesCollection = new TimeSeriesCollection(); 
localTimeSeriesCollection. addSeries(localTimeSeriesl); 
localTimeSeriesCollection. addSeries(localTimeSeries2); 
return localTimeSeriesCollection;) 

public void doGet(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException ( 

response. setContentType(" inage/jpeg;charset = utf – 8"); 
JFreeChart localJFreeChart = createChart(createDataset()); 
//try 里 面 是 生成 图 片 的 代码 , 只 需要 传人 一 个 chart 


try { 
OutputStream os = new FileOutputStream("line. jpeg"); 
try ( 
// fi ChartUtilities 生成 文件 到 一 个 体 outputStream 中 去 
ChartUtilities. writeChartAsJPEG( response. getOutputStream( ) localJFreeChart, 500, 
300); 


) catch (IOException e) ( 
e.printStackTrace(); } 
} catch (FileNotFoundException e) { 
e.printStackTrace(); ] 
// 输 出 图 片 
//1nagelO.write(localJFreeChart, "JPG", response. getOutputStream()); 
response.getOutputStream().close(); } 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doGet(request,response); } 
public void init() throws ServletException ( } 
) 


© 在 地 址 栏 输入 http: //localhost: 8080/]Jfreechartdemo/LineChartServlet ,运行 效果 
如 图 11-14 所 示 。 

(4) 拓展 训练 实验 。 参 考 下 列 程序 ,从 串口 实时 读 取 环境 温度 数据 。 编 写 JSP 程序 , 实 
现 环 境 温度 以 时 序曲 线 图 的 方式 实时 显示 ,监控 。 拓 展 训练 实验 步骤 及 参考 代码 如 下 : 

(D rxtx 文件 配置 : 

。 把 下 载 包 中 rxtxSerial. dll Ж $125 java _ home% \ jre\ bin \ F ЖП С: V Windows V 

System32V F; 
* 把 下 载 包 中 RXTXcomm. jar ЖЖЖ 25java home?6NjireMibVextN F ; 
。 把 下 载 包 中 RXTXcomm. jar 粘贴 到 项 目的 WebRootVWEB-INFALib 中 。 
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© 编写 读 取 串 口 的 Java 程序 ,这 里 共有 4 个 文件 。 
SerialBuffer. java 参考 代码 如 下 : 


package serial; 
/ ++ 
* SerialBuffer 是 本 类 库 中 所 定义 的 串口 缓冲 区 ， 
* 它 定 义 了 往 该 缓冲 区 中 写 人 数据 和 从 该 缓冲 区 中 读 取 数据 所 需要 的 函数 
*/ 
public class SerialBuffer { 
private String Content = ""; 
private String CurrentMsg, TempContent; 
private boolean available - false; 
private int LengthNeeded - 1; 
/x** 
* 本 函数 从 串口 (缓冲 区 ) 中 读 取 指 定 长 度 的 一 个 字符 串 
* 参数 Length 指定 所 返回 字符 串 的 长 度 
*/ 
public synchronized String GetMsg( int Length) { 
LengthNeeded = Length; 
notifyAll(); 
if (LengthNeeded > Content. length()) { 
available - false; 
while (available == false) { 
try{ wait(); 
] catch (InterruptedException e) { } 
} 
} 
CurrentMsg = Content. substring(0, LengthNeeded); 
TempContent = Content. substring(LengthNeeded); 
Content = TempContent; 
LengthNeeded = 1; 
notifyAll(); 
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return CurrentMsg; 
) 
"E 
* 参数 t 存储 字符 串 的 值 
* 本 函数 向 串口 缓冲 区 中 写 人 一 个 字符 ,参数 是 需要 写 人 的 字符 
* 在 往 缓冲 区 写 人 数据 或 者 是 从 缓冲 区 读 取 数 据 的 时 候 , 必须 保证 数据 的 同步 
* 因此 GetMsg 和 PutChar 函数 均 被 声明 为 synchronized 并 在 具体 实现 中 采取 措施 实现 的 数据 
* 的 同步 
*/ 
public synchronized void PutChar( int c) { 
Character d = new Character( (char) с); 
Content = Content. concat(d. toString()); 
if (LengthNeeded < Content. length()) ( 
available = true; 
) 
notifyAll(); 


) 
ReadSerial. java 参考 代码 如 下 : 


package serial; 
import java. io. * ; 
/ 
* ReadSerial 是 一 个 进程 , 它 不 断 地 从 指定 的 串口 读 取 数 据 并 将 其 存放 到 缓冲 区 中 
*/ 
public class ReadSerial extends Thread { 
private SerialBuffer ComBuffer; 
private InputStream ComPort; 
/ ++ 
* Constructor 
* (Qparam SB 
* The buffer to save the incoming messages. 
* 本 函数 构造 一 个 ReadSerial 进程 ,参数 SB 指定 存放 传人 数据 的 缓冲 区 
* 参数 Port 指定 从 串口 所 接收 的 数据 流 
*/ 
public ReadSerial(SerialBuffer SB, InputStream Port) { 
ComBuffer = SB; 
ComPort = Port; 
] 
/* ReadSerial 进程 的 主 函数 ,不 断 地 从 指定 的 串口 读 取 数 据 并 将 其 存放 到 缓冲 区 中 * / 
public void run() { 
int c; 
try { 
while (true) { 
с = ConPort. read(); 
/ /Systen. out. print(" ~ ~" + (char)c); 
ConBuffer.PutChar(c); 
) 
) catch (IOException е) { 
) 


) 


SerialBean. java 参考 代码 如 下 : 


package serial; 


import gnu. 
import gnu. 
import gnu. 
import gnu. 
import gnu. 


io.CommPortIdentifier; 

io. NoSuchPortException; 

io. PortInUseException; 

io.SerialPort; 
io.UnsupportedCommOperationException; 


import java. іо. * ; 
/ * SerialBean 是 本 类 库 与 其 他 应 用 程序 的 接口 ,该 类 中 定义 了 SerialBean 的 构造 方法 以 及 初始 化 
х 串口 ,从 串口 读 取 数 据 、 往 串口 写 人 数据 以 及 关闭 串口 的 函数 


*/ 


public class SerialBean { 


static String PortName; 
CommPortIdentifier portId; 
SerialPort serialPort; 


static OutputStream out; 


static InputStream in; 
SerialBuffer SB; 
ReadSeria1 RT; 


/ ++ 


* Constructor * 
* (@param PortID 
* the ID of the serial to be used. 1 for COM1, 2 for COM2, etc. * 


*/ 


public SerialBean(int PortID) (PortName = "COM" + PortID;} 


/ ++ 


* 


х 本 函数 初始 化 所 指定 的 串口 并 返回 初始 化 结果 。 如 果 初 始 化 成 功 返回 1, 否则 返回 -1 
* 初始 化 的 结果 是 该 串口 被 SerialBean 独占 性 使 用 


* 


其 参数 被 设置 为 9500， N, 8, 1( 这 要 根据 实际 修改 的 ) 


* 如 果 串 口 被 成 功 初 始 化 , 则 打开 一 个 进程 读 取 从 串口 传人 的 数据 并 将 其 保存 在 缓冲 区 中 


*/ 


public int Initialize() { 
int InitSuccess = 1; 
int InitFail =-1; 
try { 


System. out. println("PortName = " + PortName); 
portId = CommPortIdentifier.getPortIdentifier(PortName); 
try ( 


serialPort = (SerialPort) portlId.open("Serial Communication" ,1000); 


// 打 开端 口 ,两 个 参数 : 程序 名 称 ,延迟 时 间 ( 毫 秒 数 ) 

) catch (PortInUseException e) { 

return InitFail; 
) 
// 使 用 InputStream 从 串口 读 取 , fili JH OutputStream 写 人 串 行 端口 
try { 

in = serialPort.getInputStream(); 

out = serialPort.getOutputStream(); 
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] catch (IOException e) { 
return InitFail; 


) 
// 初 始 化 参数 为 2400，8，1，none 
try { 
serialPort.setSerialPortParams(115200, SerialPort.DATABITS 8, 
SerialPort.STOPBITS 1, SerialPort. PARITY NONE); 
) catch (UnsupportedCommOperationException e) { 
return InitFail; 
) 
) catch (NoSuchPortException e) ( 
return InitFail; 
) 
/ * 当成 功 打开 串口 ,创建 一 个 新 的 串口 缓冲 区 ,然后 创建 一 个 线程 ,始终 从 串口 接收 传人 
的 信号 。 传 人 的 信号 存储 在 串口 缓冲 区 * / 


SB = new SerialBuffer(); // 创 建 一 个 新 的 串口 缓冲 区 

RT = new ReadSerial(SB, in); // 然 后 创建 一 个 线程 ,始终 从 串口 接收 传人 的 信号 
RT. start(); 

// 返 回 完成 信息 


return InitSuccess; 
) 
/ ++ 
* 本 函数 从 串口 (缓冲 区 ) 中 读 取 指 定 长 度 的 一 个 字符 串 
* 参数 Length 指定 所 返回 字符 串 的 长 度 
*/ 
public String ReadPort( int Length) { 
String Msg; 
Msg = SB.GetMsg(Length); 
return Msg; 
} 
"E 
* 本 函数 向 串口 发 送 一 个 字符 串 ,参数 Msg 是 需要 发 送 的 字符 串 
*/ 
public void WritePort(String Msg) { 
int c; 
try ( 
for (inti = 0; i«Msg.length(); i++) 
out.write(Msg.charAt(i)); 
) catch (IOException e) ( 
) 
) 
/ xx 
* 本 函数 停止 串口 检测 进程 并 关闭 串口 
*/ 
public void ClosePort() { 
RT. stop(); 
serialPort.close(); 


SerialExample. java 参考 代码 如 下 : 


package serial; 
//import serial. * ; 
//import java. io. * ; 
/ жж 
* Java EER B LEE. ТЕШ, П ЖЕ, BUFIPERIBIS EN 
* SerialExample 是 本 类 库 所 提供 的 一 个 例 程 。 它 所 实现 的 功能 是 打开 串口 COM2, 对 其 进行 初始 化 ， 
* 从 串口 读 取信 息 并 显示 
*/ 
class SerialExample { 
public static void main(String[] args) ( 
// 此 处 加 入 Java 代码 
int comid = 2; //COM2 
SerialBean SB = new SerialBean(comid); 
System. out. println("SB= " * SB); 
String Msg; 
int s= SB. Initialize(); 
if(s--1) // 初 始 化 成 功 s=1; 失败 s=- 1( 串 口号 不 对 或 被 别 的 占用 ) 
System. out. println(" 串 口 初始 化 成 功 ! S=" +s); 
else 
System. out. println(" 串 口 初始 化 失败 !( 串 口号 不 对 或 被 别 的 占用 ); S=" +s); 
System. out. println(" 每 秒 读 取 8+ 4 个 字符 后 有 一 个 回 车 符 ( 传 感 器 每 2 秒 发 送 1 次 )"); 
int i=1; 
while (true) ( 
Msg = SB.ReadPort(1); 
System. out. print(Msg); 
) 


) 


程序 运行 条 件 : 接 和 人 串口 设备 (最 好 先 用 串口 调试 助手 测试 串口 是 否 正常 工作 ) ,串口 
设备 连续 向 计算 机 的 串口 发 送 串 行 数据 ,本 例 所 用 串口 设备 的 数据 格式 为 “ 波 特 率 一 
115200,8,n,l,n”, 每 秒 发 送 的 一 行 字符 串 ,格式 *DS18B20: xx . x ”( 这 里 +x, x 为 十 进 制 
温度 数据 ) 。 

运行 SerialExample. java 后 ,在 控制 台 上 输出 从 串口 读 取 的 数据 ,如 图 11-15 所 示 。 


PortName=COM2 

Stable Library 

Native lib Version = RXTX-2.1-7 
Java lib Version = RXTX-2.1-7 
串口 初始 化 成 功 ! s=1 

每 秒 读 取 8+4 个 字符 后 有 一 个 回 车 符 〈 传 感 器 每 2 秒 发 送 1 次 》 
S18B20:18.9 

DS18B20:18.8 

DS18B20:18.6 

DS18B20:18.4 

DS18B20:18.3 


Р 11-15 Java 读 取 串口 数据 
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O 编写 JSP 程序 ,实现 环境 温度 以 时 序曲 线 图 的 方式 实时 显示 并 监控 。 
项 目 实 训 4 树 形 菜单 


实 训 任务 4-1 
【 实 训 任 务 】 
设计 一 个 带 有 Dtree 树 形 菜单 的 JSP 应 用 项 目 。 
Dtree 是 一 个 免费 的 JavaScript 脚本 , 需 定义 有 限 的 几 个 参数 ,就 可 以 做 出 漂亮 的 树 形 


菜单 ,有 关 资 源 也 可 从 网 上 下 载 。 本 实验 使 用 JS 十 CSS 十 HTML 控制 树 形 菜 单 ,为 “ 实 训 任 
务 2” 的 动态 树 形 菜单 做 准备 。 


【实验 步骤 】 
(1) 新 建 Web 工程 ,工程 名 为 dtreemenu。 
(2) 编写 3 文件 一 一 dtree. css,dtree. js、menu01. html, 其 中 dtree. css、dtree. js 可 直接 


利用 下 载 的 文件 ,作用 是 控制 菜单 树 形 效 果 ; menu01. html 为 具体 菜单 项 ,需要 根据 项 目 实 
际 编程 。 在 dmg 文件 夹 中 复制 相关 菜单 项 图 标 文件 。dtree. css 参考 代码 如 下 : 


———Á— | 


.dtree { 
font – family: Verdana, Geneva, Arial, Helvetica, sans- serif; 
font- size: llpx; 
color: #666; 
white- space: nowrap; } 

.dtree ing { 
border: Opx; 
vertical- align: middle;] 

.dtreea ( 
color: #333; 
text- decoration: none; } 

. dtree а. node, .dtree a.nodeSel { 
white- space: nowrap; 
padding: 1px 2px 1px 2px; } 

. dtree a. node:hover, .dtree a. nodeSel : hover { 
color: #333; 
text – decoration: underline; } 

. dtree a. nodeSel { 
background- color: # c0d2ec;]) 

.dtree .clip( 
overflow: hidden;] 


dtree. js( 位 于 Web Root 下 的 js 文件 夹 中 ) 参 考 代码 如 下 : 


//Node object 


function Node( id, pid, name, url, title, target, icon, iconOpen, open) ( 


}; 


this. id = id; 

this. pid = pid; 

this. name = name; 
this.url = url; 

this. title = title; 
this. target = target; 
this. icon = icon; 

this. iconOpen = iconOpen; 
this._io = open || false; 
this. is = false; 
this. ls = false; 
this._hc = false; 
this._ai = 0; 

this. p; 


//Tree object 
function dTree(objName) { 


this.config = ( 
target : null, 
folderLinks : true, 
useSelection: true, 
useCookies : true, 
useLines : true, 
uselcons : true, 
useStatusText: false, 
closeSameLevel: false, 
inOrder : false 


) 

this.icon = ( 
root : 'img/base.gif', 
folder : 'ing/folder. gif', 
folderOpen : 'img/folderopen.gif', 
node : 'img/page.gif', 
empty : 'ing/empty.gif', 
line : 'img/line.gif', 
join : 'img/join.gif', 
joinBottom img/joinbottom.gif', 
plus : 'img/plus.gif', 
plusBottom : 'img/plusbottom.gif', 
minus : 'ing/ninus.gif', 
minusBottom : 'ing/minusbottonm.gif', 
nlPlus : 'ing/nolines plus.gif', 
nlMinus : 'img/nolines minus.gif' 


H 

this.obj - objName; 
this.aNodes - []; 
this.aIndent - []; 

this. root = new Node( – 1); 
this.selectedNode = null; 
this.selectedFound = false; 
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this. completed = false; 
E 
// 向 节点 中 添加 新 菜单 节点 
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) ( 
this. aNodes[this. aNodes. length] - new Node(id, pid, name, url, title, target, icon, 
iconOpen, open); 
}; 
// 打 开 / 关 闭 菜单 节点 
dTree.prototype.openAll = function() ( 
this.oAll(true);]); 
dTree.prototype.closeAll - function() ( 
this.oAll(false);]; 


// 向 页 面 输出 树 形 菜单 
dTree. prototype. toString = function() { 
var str = <div class = "Фгее">\п'; 


if (document. getElementById) { 
if (this. config. useCookies) this.selectedNode = this.getSelected(); 
str += this. addNode( this. root); 

} else str += 'Browser not supported. '; 

str += '«/div»'; 

if (!this.selectedFound) this.selectedNode = null; 

this. completed = true; 


return str; 

}; 

// 添 加 节点 

dTree. prototype. addNode = function(pNode) { 
var str = ''; 
var n= 0; 


if (this.config.inOrder) n = pNode. ai; 
for (n; n < this. aNodes. length; п++) ( 
if (this.aNodes[n].pid == pNode. іа) { 
var cn = this.aNodes[n]; 
cn. p 7 pNode; 
cn. ai = n; 
this.setCS(cn); 
if (!cn.target && this.config.target) cn.target - this.config.target; 
if (cn. hc && !cn. io && this. config. useCookies) cn. io = this. isOpen(cn. id); 
if (!this.config.folderLinks && cn. hc) cn.url = null; 
if (this.config.useSelection && cn. id == this. selectedNode && ! this. selectedFound) ( 
cn. is = true; 
this.selectedNode = n; 
this.selectedFound = true;} 
str += this.node(cn, n); 
if (cn. ls) break;} 
) 
return str; 
}; 
// 创 建 菜单 项 图 标 URL. 及 显示 文字 
dTree. prototype.node = function(node, nodeld) { 
var str = '«div class - "dTreeNode"»' + this. indent(node, nodeld); 
if (this.config.useIcons) ( 


if (!node. icon) node. icon = (this.root.id == node. pid) ? this. icon. root : ((node. _ 
hc) ? this. icon. folder : this. icon. node) ; 
if (!node. iconOpen) node. iconOpen = (node. hc) ? this. icon. folderOpen : this. icon. node; 
if (this.root.id == node.pid) ( 
node. icon = this.icon.root; 
node. iconOpen = this. icon. root; } 
str += <img id="i'+ this.obj + nodeId + "src="'+ ((node. io) ? node. ісопОреп 
: node. icon) + '" alt= "" />'; 
} 
if (node.url) { 
str += '«a id-"s' + this. obj + nodeId + '" clas 
useSelection) ? ((node. is ? 'nodeSel': 'node')) : 'node') + '" href = 
if (node. title) str += 'title-"' + node.title + '"'; 
if (node. target) str += 'target-"' + node. target + '" 
if (this. config. useStatusText) str += ' onmouseover = "window. status = V'' + node. 


-"' + ((this. config. 
' + node.url + OU 


name + '\';return true;" onmouseout = "window. status = V V';return true;" '; 
if (this.config.useSelection && ( (node. hc && this. config. folderLinks) || !node. hc)) 
str += 'onclick = "javascript: ' + this.obj + '.s(' + nodeId + ');"'; 
str += >"; 
) 
else if ((! this.config.folderLinks || !node.url) && node. hc && node. pid != this.root. id) 
str += '<ahref = "javascript: ' + this.obj + '.o(' + nodeld + ');" class = "пойе">'; 
str += node.name; 
if (node.url || ((!this.config.folderLinks || !node.url) && node. hc)) str += '</a>'; 
str += '«/div»'; 
if (node. hc) ( 
str += div id-"d' + this.obj + nodeld + '" class = "clip" style = "display:' + 
((this.root.id == node.pid || node. io) ? 'block': 'none') + ';">'; 
str += this.addNode(node); 
str += '«/div»'; 
) 
this. aIndent. pop() ; 
return str; 
}; 
// 添 加 空白 菜单 及 横 线 图 标 
dTree. prototype. indent = function(node，nodeId) { 
var str = ''; 
if (this.root. id != node.pid) { 
for (var n2 0; n<this.aIndent. length; n++) 
str += '«img src-"' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this. icon. 
line : this. icon. empty ) + ""alt-"" />'; 
(node. 15) ? this.aIndent.push(0) : this.aIndent. push(1) ; 
if (node. hc) ( 
str += a href = "javascript: ' + this.obj + '.o(' + nodeId + ');">< img id- "j' + 
this.obj + nodeld + '" src= "'; 
if (!this.config.useLines) str += (node. іо) ? this. icon.nlMinus : this. icon. nlPlus; 
else str += ( (node. io) ? ((node. ls && this. config. useLines) ? this. icon. 
minusBottom : this. icon. minus) : ((node. 15 && this.config.useLines) ? this. icon. plusBottom : 
this. icon.plus ) ); 
str += '" а= "" /»«/a»'; 
) else str += '< img src- "' + ( (this. config. useLines) ? ((node. 15) ? this. icon. 
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joinBottom : this. icon. join ) : this. icon. empty) + "alt-"" />'; 
} 
return str; 
}; 
// 添 加 包含 子 菜单 项 的 复 选 框 
dTree. prototype. setCS = function(node) { 
var lastld; 
for (var n = 0; n< this. aNodes. length; п++) { 
if (this.aNodes[n].pid == node.id) node. hc = true; 
if (this.aNodes[n].pid == node. pid) lastId = this.aNodes[n]. id; 
) 
if (lastId == node.id) node. ls = true; 
}; 
// 返 回 选择 的 菜单 项 
dTree. prototype. getSelected = function() { 
var sn = this.getCookie('cs' + this.obj); 
return (sn) ? sn : nu11; 
B 
// 高 亮 显示 所 选择 的 菜单 项 
dTree.prototype.s = function(id) ( 
if (!this.config.useSelection) return; 
var cn = this.aNodes[ id]; 
if (cn. hc && ! this.config.folderLinks) return; 
if (this.selectedNode != id) ( 
if (this.selectedNode || this.selectedNode -- 0) ( 
eOld = document.getElementById("s" + this.obj + this.selectedNode); 
e0ld. className = "node"; 
) 
eNew = document.getElementById("s" + this.obj + id); 
eNew.className = "nodeSel"; 
this.selectedNode - id; 
if (this.config.useCookies) this.setCookie('cs' + this.obj, сп. id); 


}; 
// 菜 单 某 一 节点 打开 或 关闭 
dTree. prototype.o = function(id) { 
var cn = this.aNodes[ id]; 
this. nodeStatus( ! cn. io, id, cn. ls); 
cn. io = !cn. io; 
if (this.config.closeSameLevel) this.closeLevel(cn); 
if (this.config.useCookies) this. updateCookie(); 
}; 
// 打 开 或 关闭 所 有 菜单 节点 
dTree.prototype.oAll = function(status) { 
for (var п= 0; n< this. aNodes. length; п++) { 
if (this.aNodes[n]. hc && this.aNodes[n].pid != this.root. id) { 
this.nodeStatus(status, n, this.aNodes[n]. 1s) 
this.aNodes[n]. io = status; 


) 
if (this.config.useCookies) this. updateCookie(); 


}; 
// 打 开 特 定 菜单 项 
dTree.prototype.openTo = function(nId, bSelect, bFirst) { 
if (!bFirst) { 
for (var п= 0; n< this.aNodes. length; п++) { 
if (this.aNodes[n].id == nId) { 


nId =n; 
break; 
) 
) 
) 
var cn = this. aNodes[nId]; 
if (cn.pid == this.root.id || !cn._p) return; 


cn. io = true; 
cn. is - bSelect; 
if (this. completed && cn. hc) this.nodeStatus(true, cn. ai, cn. ls); 
if (this.completed && bSelect) this.s(cn. ai); 
else if (bSelect) this. sn-cn. ai; 
this.openTo(cn. p. ai, false, true); 
}; 
// 关 闭 同 级 节点 中 的 全 部 菜单 项 
dTree.prototype.closeLevel = function(node) { 
for (var n = 0; n< this. aNodes. length; п++) { 
if (this.aNodes[n].pid == node. pid && this. aNodes[n]. id != node. id && this. aNodes 
[n]. hc) ( 
this.nodeStatus(false, n, this.aNodes[n]. 1s); 
this.aNodes[n]. io = false; 
this.closeAllChildren(this.aNodes[n]); 
n 
// 关 闭 某 节点 下 的 所 有 子 菜单 
dTree. prototype. closeAllChildren = function(node) { 
for (var n = 0; n< this. aNodes. length; п++) ( 
if (this.aNodes[n].pid == node. id && this.aNodes[n]. hc) ( 
if (this.aNodes[n]. io) this.nodeStatus(false, n, this.aNodes[n]. 1s); 
this.aNodes[n]. io - false; 
this.closeAllChildren(this.aNodes[n]); 
n 
// 改 变 菜单 项 节点 状态 (打开 或 关闭 ) 
dTree. prototype.nodeStatus = function(status，id，bottom) { 
eDiv = document.getElementById('d' + this.obj + id); 
eJoin = document.getElementById('j' + this.obj + id); 
if (this.config.useIcons) ( 
eIcon = document.getElementById('i' + this.obj + id); 
eIcon. src = (status) ? this.aNodes[ id]. iconOpen : this. aNodes[ id]. icon; 
) 
eJoin.src = (this.config.useLines)? 
((status)? ((bottom)? this. icon. minusBottom: this. icon. minus): (( bottom)? this. icon. 
plusBottom:this. icon. plus) ) : 
((status)?this. icon. nlMinus:this. icon. nlPlus); 
eDiv.style.display = (status) ? 'block': 'none'; 
H 
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// 清 除 Cookie 

dTree.prototype.clearCookie = function() ( 
var now = пем Date(); 
var yesterday = new Date(now.getTime() — 1000 * 60 * 60 * 24); 
this. setCookie('co' + this.obj, 'cookieValue', yesterday); 
this.setCookie('cs' + this.obj, 'cookieValue', yesterday); 

}; 


// 设 置 Cookie 
dTree. prototype. setCookie = function(cookieName, cookieValue, expires, path, domain, secure) 
{ 
document. cookie = 
escape(cookieName) + '=' + escape(cookieValue) 
+ (expires ? '; expires=' + expires.toGMTString() : '') 
+ (path? '; path= ' + path : ") 
+ (domain? '; domain = ' + domain: '') 
+ (secure ? '; secure': ''); 
}; 
// 获 得 Cookie 的 值 


dTree. prototype. getCookie = function(cookieName) { 
var cookieValue = ''; 
var posName = document. cookie. indexOf(escape(cookieName) + '= '); 
if (posName != -1)( 
var posValue = posName + (escape(cookieName) + '- ').length; 
var endPos = document. cookie. indexOf(';', posValue); 
if (endPos != — 1) cookieValue = unescape(document. cookie. substring(posValue, endPos)); 
else cookieValue - unescape(document. cookie. substring(posValue)); 
) 
return (cookieValue); 
}; 
// 以 字符 串 的 形状 返回 打开 节点 的 ID 
dTree. prototype. updateCookie = function() { 
var str = ''; 
for (var n = 0; n< this. aNodes. length; п++) { 
if (this.aNodes[n]. io && this.aNodes[n].pid != this.root. id) { 
if (str) str += '.'; 
str += this.aNodes[n]. id; 


) 
this.setCookie('co' * this.obj, str); 
}; 
// 判 断 节点 ID 是否 在 Cookie 中 
dTree.prototype.isOpen = function(id) { 
var a0pen = this.getCookie('co' + this.obj).split('. '); 
for (var n = 0; n< a0pen. length; n++) 
if (aOpen[n] == id) return true; 
return false; 
}; 
// 处 理 浏览 器 不 支持 push 与 pop 的 情况 
if (!Array. prototype. push) { 


Array. prototype. push = function array_push() { 
for(var i= 0;i< arguments. length; i++) 
this[this. length] = arguments[ 1]; 
return this. length; 
H; 
if (! Array. prototype. рор) { 
Array. prototype. pop = function array_pop() { 
lastElement = this[this. length- 1]; 
this. length Math. max( this. length- 1,0); 
return lastElement; 


H; 
文件 menu01. html, 主 要 定义 具体 菜单 项 内 容 , 其 参考 代码 如 下 : 


<html> 
<head> 
<title>Dtree 树 形 菜单 </title> 
< link rel = "StyleSheet" href = "css/dtree.css" type = "text/css" /> 
< script type = "text/javascript" src = "js/dtree. js"></script > 
</head> 
<body> 
< h2 > Dtree 树 形 菜单 示例 (JS + CSS + HTML)</h2 > 
<div class = "dtree"> 


" 


<p>< a href = " javascript: d. орепА11 ( );"> open all </a > | < a href = " javascript: d. 
closeAll();"» close all </а ></p> 
< script type = "text/javascript"> 
qae 
d = new dTree( 'd'); 
d.add(0, - 1，' 树 形 菜单 示例 ') ; 
d.add(1,0, 一 级 菜单 A', "http://www. ntu. edu. cn') ; 
d. add(2,0, 一 级 菜单 B', 'nenu01. htn1'); 
d.add(3,1，' 节 点 1. 1', 'menu01. htnl'); 
d. add(4,0, 一 级 菜单 C', 'menu01. html '); 
d.add(5,3, ' 节 点 1.1.1', 'menu01. html'); 
d.add(6,5, ' 节 点 1.1.1.1', 'menu01. html"); 
d.add(7,0, 一 级 菜单 D', 'menu01. htm1') ; 
d.add(8,1,' 节 点 1.2', 'menu01. html'); 
d.add(9,0, 'My Pictures', 'menu01. html', 'Pictures...', '', '', 'img/imgfolder. gif'); 
d.add(10,9, ' 游 长 江 ', 'menu01. html', 'Pictures...'); 
d. add(11,9, ' 我 的 童年 ', 'menu01. html); 
d.add(12,0, 'Readne', 'menu01. html', '', '', 'ing/trash.gif'); 
document. write(d); 


//--» 
</script> 
</div> 
< p> Designed By Mr. Wangcm </p> 第 
</body> 11 
</html> * 
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(3) 运行 效果 如 图 11-16 所 示 。 
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Æ 11-16 Dtree 树 形 菜单 运行 效果 


实 训 任务 4-2 
【 实 训 任务 】 


本 实 训 是 在 实 训 任 务 1 的 基础 上 ,菜单 项 内 容 不 再 是 固定 不 变 , 而 是 从 数据 库 中 读 取 ， 
满足 实际 需求 。 


【设计 思路 】 


仍然 利用 dtree. js 和 dtree. css 控制 树 形 菜单 效果 ,编写 几 个 Java 类 ,用 于 从 数据 库 找 
出 节点 信息 ,并 且 生 成 javascript 脚本 , 供 菜单 显示 页 面 dtreemenu. jsp 调用 ,达到 动态 获取 
菜单 项 内 容 的 目的 。 


【实验 步骤 】 


(1) 在 数据 库 treemenu # tree 菜单 表 , 有 nodeld, parentId, nodeName, url, title, 
target,icon,iconOpen,open 等 节点 信息 。 这 些 节点 信息 含义 如 下 : 

(D nodeld: 表示 当前 节点 的 ID. 

© parentId: 表示 当前 节点 的 父 节 点 的 ID, 根 节点 的 值 为 一 1( 必 须要 有 一 个 根 节点 !1)。 

@ nodeName: 节点 要 显示 的 文字 。 

Ф url; 单 击 该 节点 的 超 链 接 。 

© title: 鼠标 移 至 该 节点 时 显示 的 文字 。 

© target; 指定 单 击 该 节点 时 在 哪个 帧 中 打开 超 链接 。 

(D icon: 节点 图 标 , 节 点 没有 指定 图 标 时 使 用 默认 值 。 

(& iconOpen: 节点 打开 的 图 标 , 节 点 没有 指定 图 标 时 使 用 默认 值 。 

(9 open; 节点 是 否 打开 。 

菜单 表 结构 及 记录 示例 如 图 11-17 所 示 。 
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图 11-17 用 于 Dtree 树 形 菜单 的 菜单 表示 例 


生成 数据 库 treemenu 的 脚本 文件 如 下 : 


/ ж 

MySQL Data Transfer 

Source Host: localhost 
Source Database: treemenu 
Target Host: localhost 
Target Database: treemenu 
*/ 

SET FOREIGN_KEY_CHECKS = 0; 


DROP TABLE IF EXISTS 'tree'; 

CREATE TABLE 'tree' ( 
'id'int(11) NOT NULL auto increment, 
'pid' int(11) default NULL, 
"name' varchar(100) default NULL, 
'url'varchar(100) default NULL, 
'title'varchar(100) default NULL, 
"target'varchar(30) character set utf8 default ' blank', 
'icon' varchar(100) default NULL, 
'iconopen' varchar(100) default NULL, 
'open' varchar(100) default NULL, 
PRIMARY KEY ('id') 

) ENGINE - InnoDB DEFAULT CHARSET - gb2312; 


INSERT INTO 'tree' VALUES ('0', '— 1', WHE Æ", null, null, ' blank', 'img/imgfolder.gif','img/ 
folderopen.gif', null); 
INSERT INTO 'tree' VALUES ('1', '0', '3 JH Pddb', 'http://www.163.com', null, ' blank', 'ing/ 
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imgfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('2', '0', '2£ BË BE2R ', 'http://www.163.com', null, ' blank', 'img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('3', '0', 'BEZR fii E.', 'http://www.163.com', null, ' blank', 'img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('4', '1', 'FjAZ', 'http://www.163.com', null, ' blank', 'img/imgfolder. 
gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('5', '1', "Ж ', 'http://www. yahoo. com', null, ' blank', 'img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('6', '2', 'Rdf& T. f&', 'http://www.163.com', null, ' blank', 'img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('7', 2', КЕТЕ", 'http://210.29.65.153:8080/jsp', null, ' blank','img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('8', '2', "iE SEBLUEEAE УЖК", "http: //210.29.65.153:8080/jsp', null, 
' blank', 'img/imgfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('9', '3', '/]у{', 'http://210.29.65.153:8080/jsp', null, ' blank', 'img/ 
ingfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('10', '3', '/]NBj', 'http://210.29.65.153:8080/jsp', null, ' blank', ' 
img/imgfolder.gif', 'img/folderopen.gif', null); 

INSERT INTO 'tree' VALUES ('11', '0', 'JSP Web Ў} ', 'http://210. 29. 65. 153:8080/jsp', null, 
' blank', 'ing/imgfolder.gif', 'img/folderopen.gif', null); 


(2) 使 用 “任务 1? 中 的 dtree. js 和 dtree. css, 

G) 编写 如 下 Java 类 ,用 于 从 数据 库 找 出 节点 信息 ,并且 生成 JavaScript 脚本 。 

(D Dbcon. java 用 于 访问 数据 库 ,返回 连接 对 象 (详细 代码 略 ) 。 

© Treelnfo. java 节点 实体 类 ,用 于 封装 节点 信息 。 

(3) Createtreejs. java 类 ,retrieveNodeInfos() 方 法 用 于 从 数据 库 获 取 菜单 节点 信息 并 返 
回 节点 集合 List. createTreelnfo ( List alist) 方法 用 于 生成 树 形 菜单 节点 的 JS 脚本 。 
TreeInfo. java 参考 代码 如 下 : 


public class TreeInfo { 
private int nodeld = 一 


private int parentId = -1; 
private String nodeName - null; 
private String url = null; 
private String title = null; 
private String target = null; 
private String icon = null; 
private String iconOpen - null; 
private String open = null; 


Createtreejs. java 参考 代码 如 下 : 


package treeutil; 

import java.util.ArrayList; 

import java.util.List; 

import java. sql. PreparedStatement; 
import java. sql. ResultSet; 

import java. sql. Connection; 


import dbbean. Dbcon; 
public class Createtreejs { 
public static List retrieveNodeInfos()( // 从 数据 库 中 获取 节点 信息 存 人 List 中 
List coll = new ArrayList(); 
try{ 
Connection conn = Dbcon. getConnection(); 
PreparedStatement ps = null; 
ResultSet rs = null; 
String sql = "select * from tree"; 
ps = conn.prepareStatement( sql); 
rs 7 ps.executeQuery(); 
TreeInfo info = null; 
while(rs!» null && rs. next() )( 
info 7 new TreeInfo(); 
info. setNodeId(rs.getInt(1)); 
info.setParentId(rs.getInt(2)); 
info. setNodeName(rs. getString(3)); 
info.setUrl(rs.getString(4)); 
info.setTitle(rs.getString(5)); 
info.setTarget(rs.getString(6)); 
info.setlcon(rs.getString(7)); 
info. setIconOpen(rs. getString(8)); 
info.setOpen(rs.getString(9)); 
coll.add(info); 
} 
]catch(Exception е){ 
System. out. println(e); 
) 
return coll; 
) 
public static String createTreeInfo(List alist)( 
/ Ft list 中 的 节点 信息 转换 成 JS XC fF (String FHR) 
StringBuffer contents = new StringBuffer(); 
contents. append( "< script type = \"text/javascript\">;\n"); 
contents. аррепа("\п <! —— "); 
contents. аррепа("\пі = new dTree('d'); Vn"); 
contents. аррепа(". add(0, — 1, ' 树 形 菜单 示例 ');\n"); 
TreeInfo info = null; 
for(int max = alist. size(),i=0;i<max;i++){ 
info = (TreeInfo)alist.get(i); 
contents. append("d. add( '" + info.getNodeId()); 
contents. append(" ', '" + info. getParentId()); 
contents. append(" ', '" + info. getNodeNane( ) ) ; 
contents. append(" ', '" + info.getUr1()); 
contents. append( " ', '" + info.getTitle()); 
contents. append(" ', '" + info. getTarget()); 第 
contents. append(" ', '" + info. getIcon()); 11 
contents. append(" ', '" + info. getIconOpen()); = 
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contents. append(" ', '" + info. getOpen() ) ; 
contents. append("') ; Vn") ; 
) 
contents. append( "document. write(d); Vn") ; 
contents. append(" // —— >"); 
contents. append( "An </script >\n"); 
return contents. toString(); 
) 
// 下 面 是 测试 时 用 的 。 测 试 时 释放 注释 标记 , 以 Java Application 运行 
/+ 
public static void main(String[]args)( 
StringBuffer tree - new StringBuffer(); 
tree. append(Createtreejs.createTreeInfo(Createtreejs.retrieveNodeInfos())); 
System. out. println(tree); 
) 
*/ 
} 


(4) 设计 dtreemenu. jsp 程序 进行 测试 。 
dtreemenu. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java.util. * ,treeutil. * " pageEncoding = "utf - 8" % > 
<% String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" + request. getServerName() + ":" + 
request.getServerPort() + path + "/"; % > 
<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
<html> 
< head> 
< base href = "< % = basePath % >"> 
<title> 带 数据 库 的 树 形 动态 菜单 示例 -- Dtree </title> 
< link rel = "StyleSheet" href = "css/dtree.css" type = "text/css" /> 
< script type = "text/javascript" src= "js/dtree. js"></script> 
</head> 
<body> 
< h2 > Dtree 树 形 菜 单 示例 -- JS + css + 数据 库 【动态 树 形 菜单 ]/h2 > 
< div class = "dtree"» 
<p><a href = "javascript: d. openA11();"» open all </a> | 
<a href = "javascript: d.closeAll();"» close a11 </a></p> 
<% = Createtreejs. createTreeInfo(Createtreejs.retrieveNodeInfos()) %> 
</div> 
< p> Designed By Mr. Wangcm </p> 
</body> 
</html > 


(5) 运行 treemenu. jsp 程序 ,效果 如 图 11-18 所 示 。 
(6) 对 照 上 述 示例 ,编写 一 个 实际 项 目 , 要 求 有 带 验证 码 的 登录 及 动态 树 形 菜 单 控 制 
效果 。 


> 带 数据 库 的 树 形 动态 菜单 示例 -一 Dtree 一 Windows Internet Ezplorer loj хі 
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11-18 动态 树 形 菜 单 运行 效果 


项 目 实 训 $ 使 用 FreeMaker 自动 生成 
Word 文档 


在 做 实际 项 目 时 ,往往 需要 在 项 目 中 动态 生成 Word 文档 ,文档 中 部 分 内 容 需 要 由 数据 
库 提 供 。Java 语言 结合 FreeMaker 技术 可 方便 地 解决 这 类 问题 。FreeMarker 是 一 个 用 
Java 语言 编写 的 模板 引擎 , 它 基 于 模板 来 生成 文本 输出 FreeMarker 不 仅 可 以 用 作 表 现 层 
的 实现 技术 ,而且 还 可 以 用 于 生成 XML JSP Java 等 。 

FreeMarker 的 工作 原理 是 用 Word 编辑 一 个 模板 文件 ,模板 文件 的 制作 是 在 普通 DOC 
文件 的 基础 上 ,对 需要 改变 内 容 的 地 方 放置 FreeMarker 标记 ,标记 格式 为 “$ {var}”, 以 
FTL 为 后 缀 名 保存 该 文件 即 得 到 FTL 模板 文件 。 再 由 Java 程序 提供 要 标记 进行 替换 的 数 
据 , 借 助 FreeMarker 组 件 , 将 数据 插入 模板 文件 中 ,最 终生 成 输出 文档 。 其 工作 原理 如 
图 11-19 所 示 。 


模板 文件 


输出 文件 
Ee 其 中 ,FIL 标记 内 容 由 Javs 提 供 
<html> 
Jaya 提供 数据 Hello Fred! 
<html> 
11-19 FreeMaker 模板 文件 工作 原理 


A HX 


JSP Web # K REAA B MKE 


【 实 训 任务 】 


使 用 FreeMaker 技术 ,自动 生成 “录取 通知 书 ”Word 文档 ,“ 录 取 通 知 书 ” 中 的 姓名 、 专 
业 等 信息 从 数据 库 获 取 。 


【实验 步骤 】 


CD 利用 Word 编辑 一 个 录取 通知 书 的 模板 文件 , 先 另 存 为 XML 格式 ,再 将 该 XML 
文件 存放 到 MyEclipse 工程 项 目 src/doc 4 F ,模板 文件 编辑 预览 效果 如 图 11-20 所 示 。 


录取 通知 书 
Siname} 同学 , 经 省 招生 委员 会 批准 , 你 被 我 校 
Sfproject} 专业 录取 ,请 凭 此 通知 书 于 9 月 1 日 来 学 
校 报到 。 


11-20 ”模板 文件 示例 


(2) 在 MyEclipse 中 打开 tzs. xml, 将 第 一 行 中 的 encoding =" UTF-8" Pit Jj. encoding = 
"GBK", 以 ftl 为 后 级 名 (tzs. D ,将 该 文件 另存 在 相同 目录 中 ,工程 目录 结构 局 部 如 
图 11-21 所 示 。 


8-8 bookstore 
EP Document 
B sre 
ËB con. havenliu. document 
| EB con. havenliu. document. template 
EL BB doc 
| 由 - 国 CreateTzs. java 
1-80) tzs doc 


В += ftl 
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11-21 模板 文件 在 项 目 中 的 结构 示例 


(3) 在 src/doc 下 新 建 createTzs. java 程序 ,该 程序 向 模板 文件 中 提供 数据 ,并 输出 新 
生成 的 Word 文件 。 


createTzs. java 参考 代码 如 下 : 


package doc; 

import java. io. BufferedWriter; 

import java. io. File; 

import java. io. FileNotFoundException; 
import java. іо. FileOutputStream; 
import java. io. IOException; 


import java. io. OutputStreamWriter; 
import java. io.Writer; 
import java. util. HashMap; 
import java. util. Мар; 
import freemarker. template. Configuration; 
import freemarker. template. Template; 
import freemarker. template. TemplateException; 
public class CreateTzs ( 
private Configuration configuration = null; 
public CreateTzs() ( 
configuration = new Configuration(); 
configuration. setDefaultEncoding("GBK"); 
j 
public void createDoc() { 
// 获 取 要 填 人 模 本 的 数据 文件 


Map < String, Object > dataMap = new HashMap < String, Object >(); 


getData(dataMap); 


/* 设置 模 本 装置 方法 和 路 径 , FreeMarker 支持 多 种 模板 装载 方法 。 可 以 从 servlet, classpath, 


数据 库 装载 ,这 里 的 模板 是 放 在 /doc 包 下 面 * / 


configuration. setClassForTemplateLoading(this.getClass(),"/doc"); 


Template tmpl = null; 
try { 


// 模 板 对 象 tmpl 


tmpl = configuration. getTemplate("tzs. ftl"); //tzs. ftl 为 要 装载 的 模板 文件 


) catch (IOException e) { 
e.printStackTrace(); } 
String outfilename = "录取 通知 书 . doc"; 


// 设 置 输出 Word 文档 名 称 


File outFile = new File("D:/temp/" + outfilename);// 输 出 文档 路 径 及 名 称 


Writer out = null; 
try ( 


out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(outFile))); 


) catch (FileNotFoundException el) ( 
el.printStackTrace();]) 
try { 
tmpl.process(dataMap, out); ) 


// 模 板 tmpl + 数据 dataMap = 输出 文档 


catch (TemplateException e) (e.printStackTrace();) 


catch (IOException e) (e.printStackTrace();) 


) 
"m 


* 注意 dataMap 中 存放 的 数据 Key 值 要 与 模板 中 的 参数 相对 应 


* @param dataMap 
*/ 


private void getData(Map < String, Object > dataMap) 


{ String name=" PRF"; 
String proj = "计算 机 信息 科学 与 技术 "; 
dataMap. put( "name", name); 
dataMap. put("project", proj); 

} 

public static void main(String[] args) { 
CreateTzs ct = new CreateTzs(); 
ct.createDoc(); 


// 该 方法 向 Map 容器 填写 数据 


// 创 建 CreateTzs 对 象 ct 
// 调 用 ct 对 象 的 createDoc() 方 法 ,最 终 完成 Word 文 档 生 成 | 第 
11 
=< 


A A Ži 


JSP Web # K X E Am B 3: viste 


(4) 运行 createTzs. java 程序 ,可 在 文件 夹 D:\temp\ 中 看 到 输出 的 文档 “录取 通知 
书 . doc”。 打 开 后 效果 如 图 11-22 所 示 。 


录取 通知 书 
IRE 同学 ,经 省 招生 委员 会 批准 , 被 我 校 
计算 机 信息 科学 与 技术 专业 录取 , 请 凭 此 通知 书 于 
9 H1 日 来 学 校 报到 。 


图 11-22 自动 生成 的 文档 效果 


(5) 参考 上 述 示 例 , 编 写 基 于 JSP Web 的 Word 文档 生成 应 用 项 目 , 应 用 文档 自行 确 
定 。 模 板 文件 中 的 蔡 换 内 容 从 数据 库 中 获取 。 


项 目 实 训 6 JSP 分 页 显示 


在 JSP 页 面 中 ,访问 数据 库 并 读 取 一 个 数据 结果 集 时 ,如 果 记 录 数 太 多 ,一 个 是 会 占用 
服务 器 的 大 量 内 存 , 造 成 服务 器 负荷 过 重 ,数据 传输 和 显示 速度 缓慢 得 难以 忍受 ; 另 一 方 
面 ,一 个 JSP 页 面 展示 空间 是 有 限 的 ,不 可 能 列 出 所 有 的 数据 库 记 录 , 一 次 传输 所 有 的 数据 
到 客户 端 也 不 合理 。 因 此 , 当 检 索 的 数据 很 多 时 ,通常 需要 分 页 显示 数据 ,并 要 实现 翻 页 。 

JSP 开发 中 ,实现 分 页 的 方法 有 很 多 种 ,每 种 方法 都 有 其 特点 ,也 有 其 缺点 。 

方法 1: 在 JSP 页 面 中 直接 分 页 。 这 种 方法 将 分 页 代码 统一 编写 在 JSP 页 面 中 ,开发 
简单 ,但 在 页 面 较 多 时 ,维护 复杂 。 

方法 2: 在 Servlet 中 实现 分 页 。 这 种 方法 采用 JSP 十 Servlet 进行 开发 ,页 面 显 示 代 码 
和 控制 代码 相 分 离 。 

方法 3: 在 JavaBean 中 实现 分 页 。 这 种 方法 采用 JSP 十 JavaBean 进行 开发 ,页 面 显示 
代码 和 业务 逻辑 代码 相 分 离 。 

上 述 几 种 分 页 方法 都 是 基于 ResultSet 里 的 数据 来 进行 分 页 ,存在 性 能 和 资源 占用 等 
问题 。 结 合 不 同 的 数据 库 的 特点 和 功能 ,还 可 以 设计 性 能 良好 占用 资源 较 少 的 分 页 程序 。 


【 实 训 日 的 】 
通过 实验 ,了 解 使 用 不 同 的 方式 在 JSP 中 实现 分 页 的 设计 思路 和 具体 实现 。 
实 训 任务 6-1 
【 实 训 任务 】 


纯 JSP 的 分 页 显示 。 设 计 思 路 是 首先 定义 分 页 参数 ,再 连接 数据 库 并 获取 原 有 记录 ， 
定位 到 要 显示 的 页 面 起 始 记录 ,最 后 将 该 页 数据 显示 到 页 面 上 。 


【实验 步骤 】 
CD 准备 数据 库 。 数 据 库 stu 脚本 文件 如 下 : 


SET FOREIGN KEY CHECKS = 0; 
CREATE TABLE 'student' ( 

'id' varchar(255) DEFAULT NULL, 

'name' varchar(255) DEFAULT NULL, 

'sex' varchar(255) DEFAULT NULL, 

'class' varchar(255) DEFAULT NULL 
) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4; 
INSERT INTO 'student' VALUES ('1213132019'，' 单 烨 '，' 男 '，' 网 络 工程 '); 
INSERT INTO 'student' VALUES ('1213132020'，' 宋 害 '，' 男 '，' 网 络 工程 '); 
INSERT INTO 'student' VALUES ( '1213132021'，' 徐 佳 烟 '，' 男 '，' 网 络 工 程 ); 
INSERT INTO 'student' VALUES ('1213132022'，' 顾 肖 锐 '，' 男 '，' 网 络 工程 '); 


(2) 设计 纯 JSP 的 分 页 程序 page. jsp. page. jsp 参考 代码 如 下 : 


<% @ page language = "java" import = "java. sql. *, java. io. * , java. util. * , java. sql. 
SQLException" %> 

<% @ page contentType = "text/html;charset = UTF - 8" % > 

< html > 

<body> 


<% 


// 把 经 常 需要 修改 的 数据 放 在 最 上 面 ,以 方便 修改 


String username = "root"; // 数 据 库 用 户 名 
String password = "123"; // 数 据 库 密码 
ResultSet rs = nu11; // 数 据 库 查 询 结果 集 


Connection conn = nu11; 
Statement stmt = nu11; 


int intPageSize = 5; // 一 页 显示 的 记录 数 
int intRowCount; // 记 录 总 数 

int intPageCount; // 总 页 数 

int intPage; // 待 显示 页 码 号 
java. lang. String strPage; 

int i; 

// 取 得 待 显示 页 码 


strPage = request. getParaneter("page") ; 
if(strPage == null) 
{ 
intPage = 1; // 如 果 在 request 中 没有 page 这 一 个 参数 ,此 时 显示 第 一 页 数据 
) 


else 


intPage = java. lang. Integer. parseInt(strPage);  // 将 字符 串 转换 成 整 型 
if(intPage< 1)intPage= 1; 


// 注 册 驱 动 程序 
try 


Class. forNane("org. gjt.mm.mysq1.Driver"); 
catch( java. lang. ClassNotFoundException e) 
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// 连 接 数据 库 并 创建 Statement X 
String url = "jdbc:mysq1: //1ocalhost:3306/stu?useUnicode = true&characterEncoding = UTF8" ; 
try 
{ 
conn = DriverManager. getConnection(url, username, password) ; 
stmt - (Statement)conn. createStatement() ; 
]catch(Exception e) 
{ 
System. err. println( "数据 库 连接 错误 :" + e. getMessage()); 
} 
// 通 过 Statement 执行 SQL 语句 来 获取 查询 结果 
try 
{ 
rs= (ResultSet)stmt. executeQuery("select * from student"); 
]catch(SQLException ex) 
{ 
System. err. println(" 数 据 库 查 错 误 :" + ex); 
} 
%> 
<% 
// 获 取 记 录 总 数 
rs. last(); 
intRowCount = rs. getRow( ) ; 
// 计 算 总 页 数 
intPageCount = ( intRowCount + intPageSize – 1)/intPageSize; 
// 调 整 待 显示 的 页 码 
if(intPage» intPageCount) intPage = intPageCount; 
%> 
< div align = "center"> 
< font color = " # 000000" size = "8"> 纯 JSP 的 分 页 显示 效果 </font > 
</div><br> 
< table width=85% border=1> 
<tr> 
<td> 学 号 </td> 
<td> 姓 名 </td> 
<td> 性 别 </td> 
<td> 班 级 </td> 
</tr> 
<% if(intPageCount > 0) 
{ 
// 将 记录 指针 定位 到 待 显示 页 的 第 一 条 记录 上 
rs.absolute( (intPage — 1) * intPageSize + 1); 
// 显 示 数 据 
i=0; 
while(i< intPageSize&&!rs.isAfterLast()) 
{ 
%> 
<tr> 
<td><% -rs.getString("id") %></td> 
<td><% = rs.getString("name") $»«/td» 


<td><% = rs.getString("sex") $»«/td» 


<td><% = rs.getString("class") %></td> 


</tr> 

<% 
rs.next(); 
THES 
) 
i 

%> 
</table> 


第 <% = intPage%> 页 Ж<% = intPageCount % » Ji 
<% if(intPage>1){ %>< Aa href = "раде. jsp?page =<% = intPage- 1 %>"> 上 一 页 </a><%} %> 
<% if(intPage < intPageCount) [ % >< a href = "раде. jsp?page =<% = intPage + 1% >"> 下 一 页 </a> 


<%}%> 

<% 

// 关 闭 结果 集 
rs.close(); 
stmt.close(); 
conn. с1озе(); 
%> 

</body> 

</html> 


(3) 运行 page. jsp 分 页 程序 ,效果 如 图 11-23 所 示 。 


的 代码 段 。 因 此 ,这 种 方式 不 适宜 用 来 实现 数据 量 大 、 数 据 表 多 的 结果 集 分 页 显示 。 


纯 Jsp 的 分 页 显示 效果 
学 号 ра PEB] BR 
1213132019 FE B 网络 工程 
12131200 RE [8 [ESTE 
121313201 REM |9 PAE 
121313202 [68 [S 网络 工程 
121313203 SE B ”网 络 工程 
第 5 页 共 7 页 上 一 页 下 一 页 Р 
ПЕГЕ ааа acl RI 5 ¿J 


图 11-23 纯 JSP 的 分 页 效果 


这 种 方式 的 优点 显而易见 ,直观 ,结构 简单 ,易于 理解 ,比较 灵活 ,可 以 自由 地 根据 不 同 
的 实际 情况 指定 一 个 页 面 中 最 多 显示 的 记录 数 。 
其 缺点 同样 明显 ,这 种 JSP 分 页 技术 ,是 针对 ResultSet 里 的 数据 来 进行 分 页 。 
ResultSet 实际 上 是 一 个 数据 缓冲 区 ,需要 耗费 内 存 。 这 种 方式 只 适合 对 单一 的 或 极 少量 的 
结果 集 进 行 分 页 ,实现 分 页 的 代码 也 不 能 被 重用 ,需要 为 每 一 个 结果 集 的 显示 写 人 实现 分 页 
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实 训 任务 6-2 
【 实 训 任务 】 


利用 Servlet 实现 分 页 。 设 计 思 路 是 在 服务 器 端的 Servlet 中 实现 分 页 ,并 且 利 用 MySQL 
的 分 页 查询 功能 实现 数据 分 页 检索 。JSP 调用 Java Servlet 的 当前 页 检索 结果 进行 显示 。 
MySql 分 页 查询 的 基本 请 法 如 下 : 


select іа, папе from test limit 参数 1, 参数 2;，// 参 数 1 从 第 几 条 开始 ; 参数 2 返回 多 少 条 记录 
Java Web 中 实现 分 页 查询 的 具体 例句 : 
select * from tableName limit (pageNow-1) * pageSize, pageSize 

其 中 ,pageNow 表示 当前 页 码 ,pageSize 为 每 页 显示 的 记录 数 。 

【实验 步骤 】 


(1) 准备 数据 库 ( 这 里 以 学 生 表 为 例 , 同 实 训 任务 6-1) 。 

(2) 编写 数据 库 连接 工具 类 Dbcon. java. 其 中 ,提供 获取 数据 库 连 接 对 象 的 方法 

getConnO 。 

(3) 编写 Servlet(UserAction. java) ,并 在 web. xml 中 注册 。 

UserAction. java 这 个 Servlet 的 主要 方法 有 : 

* public int getTotalPage() 方 法 根据 每 页 行 数 计算 返回 出 总 页 数 。 

* public List<Student> getAllData(int cur) 方 法 从 数据 库 获 取 指 定 页 号 的 那 一 页 数 
据 记 录 。 

* public void doPost() 方 法 中 首先 接收 请 求 中 的 当前 页 号 参数 ,再 调用 List Student 
getAllDataCint cur) 方法 获得 当前 页 的 数据 集合 List < Student >. 调用 
getTotalPage() 方 法 获得 总 页 数 。 将 当前 页 的 数据 集合 List 和 总 页 数 两 个 参数 经 
request 转发 到 显示 页 面 pagelist. jsp。UserAction. java 参考 代码 如 下 : 


package servlet; 

import java. io. IOException; 

import java. sql. Connection; 

import java. sql. PreparedStatement; 

import java. sql. ResultSet; 

import java. sql. SQLException; 

import java. util. ArrayList; 

import java.util.List; 

import javax. servlet. RequestDispatcher; 

import javax. servlet. ServletException; 

import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 

import javax. servlet. http. HttpServletResponse; 

import bean. * ; 

public class UserAction extends HttpServlet ( 
private static final int DATA PER PAGE - 5; 


public UserAction() { 
super(); 
) 
public void destroy() { 
super. destroy(); 
} 
public void doGet (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doPost(request, response); 
) 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String cur = (String)request.getParameter("cur"); 
List < Student > stu = пем ArrayList < Student >( ) ; 
stu = new UserAction().getAllData(Integer. parseInt(cur)); 
int totalPage - new UserAction().getTotalPage(); 
request. setAttribute("studes", stu); 
request.setAttribute("totalPage", totalPage); 


RequestDispatcher rd = request. getRequestDispatcher("pagelist. jsp"); 
rd.forward(request, response); 
} 
public void init() throws ServletException { 
} 
public int getTotalPage()( 
Connection conn = null; 
PreparedStatement pstmt - null; 
ResultSet rs = null; 
String sql = ""; 
int count - 0; 
try { 
sql = "select count( * ) from student"; 
conn = Dbcon.getConn(); 
pstmt = conn. prepareStatement(sql); 
rs 7 pstmt.executeQuery(); 
while(rs.next())( 
count = rs.getInt(1); 
) 
count = (int)Math.ceil((count + 1.0 - 1.0) / DATA PER PAGE); 
) catch (Exception e) ( 
e. printStackTrace(); 
)finally( 
try { 
Dbcon. close(rs); 
Dbcon. close(pstmt); 
Dbcon. close(conn); 
) catch (SQLException e) { 
e. printStackTrace() ; 


) 


return count; 
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} 
public List < Student > getAllData(int cur) ( 
List < Student > list = new ArrayList < Student >(); 
Connection conn = null; 
PreparedStatement pstmt = null; 
ResultSet rs = null; 
String sql = ""; 
try { 
sql = "select * from student where 1 limit ?,?"; 
conn = Dbcon.getConn(); 
pstmt = conn. prepareStatement(sql); 
pstmt.setInt(1, (cur — 1) * DATA PER PAGE); 
pstmt.setInt(2, DATA PER PAGE); 
rs - pstmt.executeQuery(); 
while(rs.next())( 
Student stu = new Student(); 
stu. setId(rs.getString(1)); 
stu. setNane(rs. getString(2)); 
stu. setSex(rs.getString(3)); 
stu. setClas(rs.getString(4)); 
list.add(stu); 


) catch (Exception e) ( 
e. printStackTrace(); 
)finallyl 
try { 
Dbcon. close(rs); 
Dbcon. close(pstmt); 
Dbcon. close(conn); 
) catch (SQLException e) ( 
e. printStackTrace() ; 


) 
return list; 
) 
//Servlet 测试 
public static void main(String[] args) { 
System. out. println(" 总 页 数 : " + пен UserAction().getTotalPage() + "第 3 页 的 内 容 是 : "); 
List< Student» list = new RrrayList< Student >(); 
list = new UserAction().getAllData(3); 
for (Student stu : list) ( 
System. out. println(stu.getName()) ; 


} 
(4) 编写 Web 页 面 测试 程序 (pagelist. jsp). pagelist. jsp 参考 代码 如 下 : 


< * @ page language = "java" import = "java.util. * " pageEncoding = "UTF - 8" % > 
<% (Qtaglib uri = "http: //java. sun. con/jsp/jstl/core" prefix- "c" %> 


<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN"» 
<html> 
<head> 
< title» JSP + Servlet + JDBC 实现 数据 分 页 显示 示例 </title> 
</head> 
<body> 
< H3» JSP + Servlet + JDBC 实现 数据 分 页 显示 示例 </H3 > 
<c:if test = " $ (param.cur == null)" 
< jsp: forward раде = "UserAction?cur = 1"»«/jsp:forward» 
</c:if> 
< c:forEach items = " $ (requestScope. studes]" var = "p"> 
$ (p.id) $ (p.name) $ (p.sex) $ (p.clas) «br» 
</c:forEach>< p> 
<c:if test = " $ (param.cur == 1}"><a> 首 页 </a><a> 上 一 页 </a></c:if> 
<c:if test = " $ (param.cur != 1}"> 
<a href = "UserAction?cur = 1"> 首 页 </a> 
<a href = "UserAction?cur- $ (param.cur - 1}"> 上 一 页 </a> 
</c:if> 
<c:if test =" $ (param.cur == requestScope. totalPage}"> 
<a> 下 一 页 </a> <a> 尾 页 </a> </c:if> 
<c:if test = " $ (param. сиг != requestScope. totalPage}"> 
<a href = "UserAction?cur- $ {param. cur + 1}"> 下 一 页 </a> 
<a href = "UserAction?cur = $ (requestScope. totalPage}"> 尾 页 </a> 


</c:if> 
[当前 第 $ (param. cur} 页 /总 共 $ {requestScope. totalPage} 页 ] 
</body> 
</htn1 > 
(5) 在 浏览 器 地 址 栏 输入 URL. pagelist. jsp 数据 分 页 程序 运行 效果 如 图 11-24 所 示 。 
== 360 安 全 浏览 器 7.1 » 文件 查看 “m IR Wb = 一 口 x 
е € | |http://ocahost:s080/page/pagelstjsp 81 y v||Q. a 


бй ” Fek > BSFE - Феи - 四 翻译 - шаш ”四 游戏 ” > 


国 JSPtservlettJnBc 实现 数据 所 x 
ЁЗ JSP+Servlet+JDBC 实现 数据 分 页 显示 示例 


| 1013092018 ÆRE 男 网 络 工程 
| 1013092032 ВАЛУ S ната 


| 首页 上 一 页 下 一 页 EN [当前 第 1 页 /总 共 7 页 ] 


| 
Quotes Saner SoD DEt: шї фт P @ m Q Qi 


11-24 pagelist.jsp 数据 分 页 运行 效果 


分 页 技术 实现 的 关键 在 于 获得 当前 页 面 的 数据 。 因 此 ,只 要 能 够 编写 获得 当前 页 数据 
的 SQL 查询 语句 ,就 可 以 完成 JSP 页 面 分 页 了 。 对 于 大 数据 量 查询 ,依赖 于 ResultSet 77 
式 的 分 页 方法 在 很 多 时 候 都 是 行 不 通 的 。 一 些 大 型 的 数据 库 管 理 系统 都 支持 数据 库 SQL | 第 


分 页 检索 ,可 以 充分 利用 各 种 大 型 数据 库 SQL 的 特性 和 高 级 功能 来 进行 分 页 。 是 
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(6) 拓展 实验 : 编写 JSP 程序 ,使 用 JavaBean 实现 数据 分 页 。 

(7) 提高 训练 : 编写 一 个 “万 能 ?的 JSP 分 页 显示 程序 ,可 以 由 用 户 定 义 需要 检索 的 表 
格 .字段 及 每 页 记录 行 数 等 参数 .“ 万 能 ”分 页 技术 相对 复杂 一 些 , 其 实质 上 是 针对 不 同 的 
表 , 不 同 的 查询 SQL 采用 可 完全 复 用 的 代码 实现 分 页 ,非常 灵活 ,具有 很 强 的 通用 性 。 实 现 
的 关键 在 于 动态 的 获得 对 结果 集中 字段 的 描述 性 信息 ,并 将 结果 集 的 数据 以 HTML 形式 
返回 。 


项 目 实 训 7 高 校 毕业 设计 管理 系统 


毕业 设计 是 实现 大 学 本 科 培 养 目 标的 一 个 重要 教学 环节 ,是 使 学 生 将 所 学 基础 理论 、 专 
业 知识 与 技能 ,加 以 综合 、 融 会 贯通 并 进一步 深化 应 用 于 实际 的 一 项 基本 训练 。 毕 业 设 计 
(论文 ) 是 使 学 生 综 合 运 用 所 学 知识 和 技能 ,理论 联系 实际 ,独立 分 析 和 解决 问题 ,为 从 事 工 
程 技术 、 经 济 管理 和 科学 研究 工作 进行 的 基本 训练 过 程 。 

这 里 介绍 一 种 实用 的 毕业 设计 (论文 ) 管 理 系统 实 训 项 目 ,已 在 综合 性 大 学 实际 投入 使 
用 ,性 能 稳定 ,使 用 方便 。 


【 实 训 任 务 】 
设计 一 套 实用 的 高 校 毕业 设计 (论文 ) 管 理 系统 。 
[3955] 


1. 需求 分 析 

毕业 设计 管理 系统 中 的 关键 是 解决 指导 老师 课题 与 学 生 的 匹配 问题 ,要 满足 双向 选择 
的 原则 ,这 样 才能 让 学 生 选 到 适合 自己 技术 特点 的 课题 与 老师 。 本 系统 借鉴 高 考 招生 的 录 
取 模 式 ,首先 ,由 教师 报 题 ,相当 于 高 校 申 报 招 生计 划 ; 由 学 生 填报 3 个 批 次 的 选 题 志愿 , 相 
当 于 高 考 学 生 填报 各 批 次 的 高 考 志愿 ; 教师 按 批 次 录取 学 生 , 这 里 的 录取 原则 应 该 是 由 老 
师 选 择 技术 特长 更 适合 该 课题 的 学 生 。 这 个 过 程 有 严密 的 逻辑 控制 。 

系统 主要 包括 教师 模块 ,学生 模 块 教务 员 模 块 及 管理 模块 。 

COD 系统 主要 功能 如 下 : 

。 教师 ,学 生 个 人 信息 维护 ; 

。 教师 课题 申报 .课题 维护 ， 

° 学生 选 题 ; 

° 教师 按 批 次 录取 学 生 ; 

。 毕业 设计 相关 文档 (模板 ) 的 自动 生成 ; 
毕业 设计 的 相关 文档 的 上 传 与 下 载 ; 

。 教学 秘书 对 各 类 相关 信息 进行 汇总 、 查 询 ,维护 、 输 出 等 。 

(2) 在 系统 中 ,毕业 设计 的 所 有 相关 文档 模板 ( 立 题 卡 、 任 务 书 、. 开 题 报告 .中 期 检查 表 、 
毕业 设计 论文 、 成 绩 评 定 表 等 ) 是 在 通用 模板 的 基础 上 自动 从 数据 库 获 取 教 师 姓 名 、 课 题名 
称 .学 生 姓名 等 信息 。 这 样 ,就 保证 了 文档 中 的 基本 信息 始终 一 致 ,准确 无 误 。 

(3) 系统 采用 基于 RBAC(Role-Based Access Control, 角 色 的 访问 控制 ) 进 行 访问 权限 


控制 。 在 КВАС 中 ,用 户 与 角色 关联 ,角色 与 权限 相关 联 ,系统 分 配 用 户 某 个 角色 ,从 而 使 
用 户 拥有 相应 角色 的 权限 。 用 户 角色 有 教师 .学 生 、 教 务 员 、 各 级 领导 等 。 

用 户 登录 后 ,系统 根据 用 户 的 角色 ,获取 相应 的 权限 (菜单 ID 集合 ) ,提供 相应 的 功能 菜 
单 , 以 高 亮 可 用 状态 显示 ,其 他 不 可 使 用 的 功能 菜单 则 设 为 灰色 。 其 运行 效果 如 图 11-25 
所 示 。 


в 


(в) GO (989) 
аша 


图 11-25 系统 主要 功能 示例 
(4) 系统 工作 基本 流程 ,如 图 11-26 所 示 。 


ee End ЕР ЭО ЖЕ Ps) 


:名 单 ,关键 时 间 点 设置 等 


FES FE ES - 
教师 报 题 P angst ostao, | 教师 文档 管理 
| 教师 录取 
E NEP MU ' 
! ив | mag | 3 个 时 间 段 1 常规 管理 阶段 
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11-26 系统 工作 基本 流程 示意 图 


各 院 系 教 务 员 分 别 对 本 单位 进行 初始 化 ,包括 各 院 系 时 间 段 设置 ,将 各 院 系 教师 名 单 和 
学 生 名 单 的 Excel 文件 导入 数据 库 等 。 

导入 的 教师 名 单 和 学 生 名 单 的 原始 文件 均 为 Excel 格式 。Excel 表格 式 可 参考 系统 下 
载 的 示例 表 。 各 单位 教师 名 单 只 需 导 入 一 次 ,以 后 这 些 名 单 还 在 ,只 需 做 一 些 维护 即 可 。 应 
届 毕 业 学 生 名 单 必须 每 年 重新 导入 。 

系统 主要 业务 体现 在 教师 报 题 .学 生 选 题 . 和 教师 录取 学 生 3 个 阶段 。 

对 于 上 传 文档 的 管理 ,系统 自动 将 各 院 系 建立 独立 的 文件 夹 , 并 且 在 各 院 系 文件 夹 中 每 
个 指导 老师 也 自动 建立 一 个 文件 夹 , 用 于 保存 该 老师 名 下 的 毕业 设计 文档 。 

2. 数据 库 设计 

系统 数据 库 名 称 bysj, 含 有 8 个 数据 表 , 表 名 ,意义 和 作用 如 表 11-2 所 示 。 


A HX 


№ ж 
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表 11-2 系统 数据 库 中 各 个 表 的 名 称 及 其 作用 


表 名 ж X fF H 
college FER 全 校 学 院 清单 及 各 学 院 基本 参数 设 定 
teacher Ж 全 校 各 院 系 教师 名 单 
student ”学 生 表 全 校 各 院 系 毕业 设计 学 生 名 单 
item 教师 报 题记 录 表 ”全校 各 院 系 教师 报 题记 录 
menu 菜单 表 系统 功能 菜单 


menurole ”角色 菜单 表 用 于 分 配角 色 所 拥有 的 菜单 ID 

userrole “用 户 角色 表 用 于 存储 用 户 角色 名 称 

news 通知 新 闻 表 用 于 存储 全 校 发 布 的 新 闻 通 知 报 题 及 对 应 的 文件 名 ,这 些 文 件 存储 于 指 
定 的 文件 来 


各 数据 库 表 结构 描述 如 表 11-3 一 表 11-10 所 示 。 
表 11-3 ŽRE (College) 


字 段 名 数据 类 型 ж ж 
Id int(4) ,主键 学院 ID 
Name varchar (50) “学院 名 称 
Lxr varchar (50) “学院 联系 人 
FirstSeleStuTime datetime 一 志愿 录取 截止 时 间 ,学 生 选 题 结 束 后 即 进入 一 志愿 录取 阶段 
SecondSeleStuTime datetime 二 志愿 录取 截止 时 间 
ThirdSeleStuTime datetime 三 志愿 录取 截止 时 间 
ItemApplyEndtime datetime 教师 报 题 结 束 时间 ,以 后 不 得 删除 课题 
StuSeleStarttime datetime 学 生 选 题 开 始 时 间 
StuSeleEndtime datetime 学 生 选 题 结束 时 间 
RAEndtime datetime 学 院 答辩 结束 时 间 ,以 后 不 得 修改 课题 


表 11-4 教师 表 (teacher) 


字 段 名 数据 类 型 d Ж 
Id int(4) ,主键 ID 
Name уагсһаг(10) 教师 姓名 
Sex varchar(1) 性 别 
ZhiCheng varchar(5) 职称 
Collegeld int(11) 学 院 ID 
Username varchar(10) 用 户 名 
Password varchar(10) 密码 
Schdept varchar(50) 系 、 部 名 称 
MaxStus int(11) 限 带 人 数 
UserRoleld int(11) 角色 ID 
Tele varchar(20) 联系 电话 
Email varchar(50) 
QQ varchar(15) 
Memo varchar(200) 个 人 简介 
GroupNum int(11) 答辩 组 编号 


GroupMark int(1) 是 否 答辩 组 长 


Ж 11-5  # (student) 


字 段 名 数据 类 型 ж Ж 
Id int(11) ,主键 学 号 ID 
Name varchar(10) 学 生 姓 名 
Sex varchar(1) 性 别 
Class varchar(20) 所 在 班级 
Type varchar(4) LESS R4 174 
Project varchar(20) 专业 
Collegeld int(11) 学 院 ID 
Password varchar(20) 密码 
UserRoleld int(11) 角色 ID 
Qualification varchar(3) 毕业 设计 资格 
Tele varchar(20) 联系 电话 
QQ varchar(15) QQ 
Email varchar(50) 

Memo varchar(200) 备注 

Finalltemld int(11) 最 终 课题 ID 号 

Firstltemld int(11) 一 志愿 ID 号 

Secondltemld int(11) 二 志愿 ID 号 

ThirdItemId int(11) 三 志愿 ID 号 
表 11-6 教师 报 题记 录 表 (item) 

字 段 名 数据 类 型 ж ж 
Id int(11) ,主键 题目 ID 
Teacherld int(11) 教师 ID 
Title varchar(80) 题目 名 称 
Requirment text 课题 对 学 生 的 要 求 
ItemContent text 课题 内 容 简 介 
PreSnold int(11) 预约 学 号 
Source varchar(35) 来 源 
Type varchar(35) 课题 类 型 
DocFlag char(7) 文档 按 位 标志 
AudOpinion varchar( 200) 审题 意见 
Score varchar(10) 成 绩 
RemarkJs varchar(200) 指导 老师 评语 
RemarkPy varchar(200) 评阅 老师 评语 
RemarkDb varchar(200) 答辩 组 评语 

表 11-7 菜单 表 (menu) 
字 段 名 数据 类 型 d ж 
Id int(11) ,主键 Id 
Name varchar(100) 菜单 名 称 
Menuurl varchar(200) 菜单 资源 页 面 
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表 11-8 角色 菜单 表 (menurole) 


+ ÉE 名 数据 类 型 d Ж 
Id int(11) ,主键 Id 

Menuld int(11) 菜单 Id 
Roleld int(11) 角色 Id 


表 11-9 用 户 角 色 表 (userrole) 


字 É 名 数据 类 型 d ж 
Id int(11) ,主键 14 

RoleName varchar(8) 角色 名 称 
Type varchar(20) 角色 分 类 


表 11-10 通知 新 闻 表 Cnews) 


字 段 名 数据 类 型 d Ж 

Id int(11) ,主键 Id 

Collegeld int(11) 学 院 ID 

Title varchar(50) 新 闻 通 知 题目 

NewsInfo text 新 闻 通 知 文件 名 

Time date 新 闻 通 知 文件 上 传 日 期 
3. 详细 设计 


(1) 教师 相关 模块 详细 设计 。 

该 模块 提供 了 教师 个 人 信息 ,教师 报 题 .题目 维护 .录取 学 生 、 模 板 下载 . 文 档 管理 成绩 
评定 表 等 功能 。 

教师 的 用 户 名 格式 为 “学 院 号 十 教师 号 ”, 这 样 做 是 为 了 便于 教师 跨 学 院 指导 学 生 , 该 教 
师 可 在 相应 学 院 拥有 相应 的 登录 账号 。 为 防止 学 院 号 出 错 ,教务 员 初 始 化 导入 名 单 时 ,教师 
名 单 Excel 表 中 的 登录 账号 一 栏 只 需 教师 号 ,前 面 的 学 院 号 系统 导入 时 会 自动 添加 。 

O 个 人 信息 子 功能 模块 ,如 图 11-27 所 示 。 

© 教师 报 题 子 功能 模块 。 

教师 报 题 时 应 尽量 将 课题 要 求 、 题 目 简介 等 填写 完整 。 这 些 信息 将 在 “模板 下 载 "菜单 
下 自动 合成 到 立 题 卡 中 。 

教师 报 题 时 可 预约 学 生 ,这 样 可 提高 命中 率 , 但 预约 的 学 生 仍然 要 参加 选 题 , 并 且 在 选 
题 时 要 将 预约 的 题目 放 在 第 一 志愿 ,教师 在 录取 阶段 可 根据 预约 情况 和 学 生 实 际 选 题 情况 
录取 ,如 图 11-28 所 示 。 

C 题目 维护 子 模块 。 

教师 报 题 后 ,可 对 所 报 课题 进行 修改 或 删除 操作 ,但 在 学 院 设置 的 报 题 结束 时 间 后 就 不 
可 删除 题目 了 ,但 可 以 修改 题目 。 题目 维护 选择 “操作 ” 栏 下 的 “编辑 ”图标 进入 修改 界面 ,如 
图 11-29 所 示 。 

@ 录取 学 生子 模块 。 

学 生 选 题 后 ,教师 在 学 院 设置 的 3 个 批 次 时 间 有 段 中 分 别 录取 3 个 批 次 的 志愿 ,如 不 在 录 
取 时 间 段 , 则 不 可 录取 。 


ЕТТП BP. 计算 机 科学 与 技术 学 院 ХЫ Ве 
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教师 信息 查看 


姓名 : Mk» 学 院 : 计算 机 科学 与 技术 学 院 ЕП: ASIER 


ees es ша 


教师 号 ，1313011 


性 别 : 男 012: 18918983888 


E-mail: ntvca0163. coa 


个 人 简介 《请 简明 扼要 ， 字 数 不 要 超过 200 字 》; 


QQ: 311363194 


z 


可 指导 如 下 方面 的 毕业 设计 ， 


联网 相关 课题 
通知 ， 语 已 被 录取 的 同学 ， 尽 快 和 我 联 
系 ， 商 量具 体 题目 及 毕业 没 计 要 求 。 
到 


图 11-27 教师 个 人 信息 查看 与 修改 
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当前 位 置 : 教师 相关 > 教师 报 题 AP: 计算 机 科学 与 技术 学 院 郭 大 为 ”教师 
题 开 始 时 间 : 12-01 00:00:00.0 
请 老师 们 抓紧 时 间 报 题 ! 
课题 题目 ，。 ЕЈР СЕРЕНА SEX 
课题 来 源 : @ 科研 C 社会 生产 实际 C 其 他 
课题 类 型 : @ 毕业 设计 C 毕业 论文 
ў : 上 L、 要 求学 生 具 备 JSP 项 目 开 发 技术 。 
Mens 2, SEDE S AELA. 
з. T Witysoi 数据 库 的 使 用 方法 | 
课题 简介 : 本 课题 正 是 针对 一 些 信息 化 程度 较 高 的 企业 ， 对 企业 仓库 管理 系统 的 一 些 主要 应 用 进行 | 
设计 ， 开 发 一 套 功 能 上 相对 完善 、 基 本 能 完成 企业 仓库 管理 的 系统 。 
预约 学 生 ”班级 |== 请 选择 班级 == 学 号 =P= = 姓名 


图 11-28 毕业 设计 报 题 界面 


当前 位 置 : 教师 相关 > 题目 维护 


用 户 : 计算 机 科学 与 技术 学 院 жна dem 


11-29 题目 维护 界面 
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如 在 相应 的 录取 时 间 段 , 则 将 显示 该 志愿 时 间 段 可 供 录 取 的 学 生 列表 , 供 教师 录取 。 例 
如 ,录取 第 一 志愿 时 ,教师 只 能 看 到 第 一 志愿 填报 该 课题 的 所 有 学 生 ,此 阶段 ,对 于 填报 该 课 
题 的 第 二 和 第 三 志愿 的 学 生 ,教师 是 看 不 到 的 。 录 取 第 二 志愿 或 第 三 志愿 时 ,只 能 看 到 填报 
相应 志愿 批 次 且 尚 未 被 录取 的 学 生 。 这 样 ,通过 逻辑 控制 ,就 保证 了 不 会 出 现 重复 录取 或 漏 


iege dps 
个 志愿 录取 完毕 后 ,对 于 仍 未 落实 课题 的 学 生 , 则 由 教务 员 或 系 部 主任 通过 系统 统一 
кик. 
图 11-30 所 示 是 第 一 志愿 录取 时 的 界面 。 
当前 位 置 : 教师 相关 > 水 职 学 生 AP: 计算 机 科学 与 技术 学 院 张 友善 Өй 安全 退出 


—SERRNAG : 2015-10-23 0:00:00 至 2015-10-29 0:00:00 
二 志愿 录 取 时 间 段 : 2015-10-29 0:00:00 至 2015-11-3 0:00:00 
三 志 原 录取 时 间 段 : 2015-10-3 0:00:00 至 2015-10-7 0:00:00 
还 未 确定 学 生 的 课题 有 : 
mH 


课题 名 称 


ЕЕЕ РЯ 8i i TERURE 

智能 家 居 系 统 设计 与 实现 

同上 书店 系统 设计 

已 经 确定 学 生 的 课题 有 

序号 | 申报 人 | 课题 名 称 | sm |жа| 现 的 学 生 | 确定 学生 и 
1 [sexe | 同上 荣誉 室 的 设计 与 研究 [hair [ви wx | pa | жет “mnam 
2 [xxm | 一 种 数字 语音 识别 系统 的 设计 与 实现 Ге | 科研 | m FAFE RAZE 
з [xxe | 无 加 传感器 同 络 安全 策略 研究 [аша Гаа | | zs | mapt втш 


11-30 教师 录取 学 生 界面 
第 二 志愿 录取 时 的 界面 如 图 11-31 所 示 。 


一 志愿 录取 时 间 段 : 2015-10-23 0:00:00 至 2015-11-3 0:00:00 
二 志愿 录 取 时 间 霞 : 2015-10-29 0:00:00 至 2015-10-29 0:00:00 
68988186 : 2015-10-3 0:00:00 至 2015-10-7 0:00:00 


ee 
序号 | e | LEJ I a m T 
1 | жжке | Е Я E | - 
2 | axe | ТТЫ! [UN ырын 
з | жка | 同上 书店 系统 设计 这 是 该 课题 没有 同学 迁 为 第 一 志愿 的 情况 
n * Tor ERAREMA 


当前 志愿 选 该 题 的 学 生 


课题 名 称 [| = | 


当前 志愿 暂 无 学 生 选 此 题 


11-31 第 二 志愿 录取 时 的 界面 


© 模板 下 载 。 
该 项 可 以 将 课题 申报 时 的 信息 、 所 选课 题 的 学 生 名 单 教师 名 单 等 结合 学 校 的 文档 格式 


样 版 自动 生成 相应 的 文档 模板 ,文档 的 自动 生成 采用 了 FreeMaker 插件 实现 ,参见 实 训 项 
E 4* 使 用 FreeMaker 自动 生成 Word 文档 ”。 


在 自动 生成 的 立 题 卡 文档 模板 中 , 圈 中 的 内 容 是 系统 自动 填 人 的 。 其 他 文档 的 模板 下 
载 也 将 自动 填 人 相应 信息 , 供 教师 和 学 生 在 文档 模板 上 完善 其 他 内 容 。 指 导 老师 可 通过 “ 文 
档 管 理 ” 菜 单项 ,将 相应 文档 上 传 至 服务 器 ,如 图 11-32 所 示 。 


课题 相关 模板 文档 下 载 : 
|99 | RH | 
[1 ТЕГЕНЕ ПЕ 
|: | = | алы | gut 
| 3 网 上 书店 系统 设计 
从 : 127.0.0.1 
Cw 
Р 来 自 Interne! Lap 
Ө Feme 
11-32 文档 模板 下 载 示例 
@ 文档 管理 。 


该 项 为 指导 老师 提供 了 教师 所 指导 毕业 设计 的 所 有 文档 资料 的 上 传 与 下 载 功 能 ,如 
图 11-33 所 示 。 


当前 位 置 : 教师 相关 > 文档 管理 BP: 计算 机 科学 与 技术 学 院 张 友善 ”教师 安全 退出 
课题 文档 资料 信息 如 下 : ”查看 所 有 学 生 信息 
编号 Z+ | 任务 书 | 开题 报告 | mua | 中 期 检查 表 | 毕业 设计 atio [成绩 评定 表 
tts mH 学 生 姓名 | 批量 上 传 | 批量 上 传 | зане | 批量 上 传 | жане 批量 上 传 
T€ MEFE | жете | REFE | REFE | HEFE 批量 下载 
1 同上 荣 莹 富 的 设计 与 研究 же | Lie wae | Lre шә | Lie we | re we | re wt | ищ [ешм 
2 | 二 种 数字 语音 识别 系统 的 设计 与 实现 | азы | Lie wae | кше] Lie we | Lie wn | Lie we |. Liew | 上 传 uie 


11-33 文档 上 传 下 载 管理 界面 


文档 管理 子 模块 页 面 中 的 “查看 所 有 学 生 信息 ”, 目 的 是 供 教师 方便 地 获取 所 指导 学 生 


的 基本 信息 。 


Ф 成 绩 评定 表 。 
该 项 供 教师 下 载 成 绩 评 定 表 的 模板 ,该 下 载 的 成 绩 评定 表 模 板 已 经 由 系统 自动 填写 了 


学 生 姓名 ,课题 名 称 、 指 导 老 师 姓名 以 及 成 绩 等 信息 。 教 师 对 下 载 成 绩 评 定 表 补 充分 项 成 绩 
及 相关 评语 等 内 容 , 完 成 后 打印 或 上 传 至 服务 器 ,如 图 11-34 所 示 。 

(2) 学 生 相 关 模 块 详细 设计 。 

请 同学 们 登录 后 ,完善 个 人 信息 ,包括 上 传 小 照片 ,填写 联系 方式 等 。 个 人 简介 可 填写 
本 人 的 技术 专长 ,希望 做 的 课题 方面 等 。 

QD 个 人 信息 。 

学 生 信 息 查 看 与 修改 界面 如 图 11-35 所 示 。 


№ ж 


项 目 实 训 


JSP Web R X Am B 3: viste 


当前 位 置 ， 笋 师 相 关 >》 成 绩 评 定 用 户 : 计算 机 科学 与 技术 学 院 郭 大 为 ”教师 安全 退出 
DE 
成 绩 评 定 表 操作 : 

л 题目 学 生 姓名 | SAPER 

1 基于 ISF 的 考试 管理 系 抗 设计 与 实现 HM rem ге 

2 Закана CURE R4 ий Team ге 

3 课程 学 习 答 疑 系统 设计 与 实现 жи [Temi ре 

+ 《Yeb 技 术 及 应 用 》 课 程 在 线 学 习 前 台 系统 的 设计 与 实 更 MEN |т®ш Lf] 

5 物 联网 环境 温度 监控 上 位 机 系统 设计 as (TE ”上传 

6 物 联 回环 境 温度 监控 前 端 系统 设计 HEZ |THE ”上传 | 


11-34 毕业 设计 成 绩 评定 表 下 载 界面 


学 生 信息 查询 


学 号 : 1113022023 姓名 : Ш Я: 计 113 


电 dá: 159993266559 
E-mail: — 4508269938qq. con 

Qo: 4508264433 
个 人 简介 : 


Б Ымыы 


та 
改 


11-35 学 生 信息 查看 与 修改 界面 


@ 学 生 选 题 。 

在 选 题 时 间 段 内 学 生 可 正常 选 题 。 在 整个 选 题 志愿 时 间 段 内 学 生 均 可 对 自己 的 选 题 志 
愿 进行 选 题 操 作 。 每 个 同学 可 选 3 个 志愿 ,但 3 个 志愿 的 指导 老师 不 同 。 在 提供 可 选课 题 
的 同时 还 给 出 了 相应 课题 的 已 选 人 数 和 是 否 有 预约 等 信息 , 供 同学 选 题 时 参考 ,学生 选 题 界 
面 如 图 11-36 所 示 。 


学 生 毕 业 设 计 选 题 志愿 填报 
学 院 学 生 填写 选 题 志愿 时 间 段 : 


11-10 12:00:00 至 11-20 12:00:00 


如 未 能 在 该 时 间 眉 选 题 ， 请 立即 和 学 院 教务 员 联 系 


你 已 有 预约 : 
ARE 老师 的 题目 : 校园 报修 系统 的 设计 与 实现 


11-36 学 生 选 题 界面 


@ 课题 信息 。 


学 生 可 下 载 相关 文档 模板 ,下 载 的 课题 是 由 指导 老师 上 传 的 相关 文档 ,如 图 11-37 


所 示 。 


学 生 毕 业 设 计 课题 信息 

指导 老师 жа 
联系 方式 13813715888 

题目 Бих 

立 题 卡 ERME 暂 缺 

任务 书 ERSE wish 
开题 报告 ТЕ 暂 缺 
中 期 检查 表 ТЕНЕ 暂 缺 

论文 下 载 模板 暂 缺 

翻译 EL 


图 11-37 学 生 课题 信息 查看 及 文档 下 载 


G) 教务 管理 模块 设计 简介 。 
教务 管理 模块 一 般 由 教务 员 操作 ,包括 教师 报 题 信息 ,学 生 志 愿 信息 、 学 生 课题 信息 Ж 


题 分 配 ,文档 信息 、 下 载 文档 ,答辩 分 组 .录入 成 绩 等 子 功能 模块 。 


(4) 基础 数据 模块 设计 简介 。 

基础 数据 模块 一 般 由 教务 员 在 初始 化 时 进行 操作 ,包括 时 间 设 置 . 教 师 名 单 导入 、 学 生 
名 单 导 入 教师 名 单 维护 ,学生 名 单 维护 . 立 题 审 核 ,学 院 发 布 信息 、 信 息 复 位 等 功能 。 

由 于 篇 幅 限制 ,这 些 模块 设计 这 里 不 再 袭 述 。 


(5) 主要 模块 代码 实现 。 


(D 过 滤器 设计 。 过 滤器 的 功能 是 对 所 有 访问 站 点 的 请 求 都 进行 过 滤 检查 ,如 用 户 尚未 


登录 , 则 强制 登录 。CharacterEncodingFilter. java 参考 代码 如 下 : 


package filter; 
import java. io. IOException; 
import javax. servlet.Filter; 


import javax. servlet. FilterChain; 
import javax. servlet.FilterConfig; 


import javax. servlet.ServletException; 
import javax. servlet.ServletRequest; 
import javax. servlet.ServletResponse; 


import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
public class CharacterEncodingFilter implements Filter { 


public void destroy() { 


//TODO Auto - generated method stub 


) 


public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 


request. setCharacterEncoding("gbk") ; 


HttpServletRequest req - (HttpServletRequest) request; 
HttpServletResponse res = (HttpServletResponse) response; 


A HX 
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String basePath = req.getScheme() + "://" + req. getServerName() + ":" + req. getServerPort() + 
req.getContextPath() * "/"; 
String url - req.getRequestURL().toString(); 
String is doc = url.substring(url.length() - 4, url. length()); 
String strl = (String) req.getSession().getAttribute("username"); 
if(is doc.equals(".doc"))( 
chain.doFilter(request, response); 


return; 

j 

if(is doc.equals(".zip"))(chain.doFilter(request, response); 
return; 

) 


if (strl != null 
| | url. equals(basePath + "login. jsp") 
| | url. equals(basePath + "js/loginVali. js") 
| | url. equals(basePath + "ImageServlet") 
| | url. equals(basePath + " inages/reset. jpg") 
|| url. equals(basePath + " images/loginback. jpg") 
| | url. equals(basePath + " images/1ogin. png" ) 
| | url. equals(basePath + "checklogin")) { 

chain.doFilter(request, response); 

) else ( 

res. sendRedirect(" /bysj/1ogin. jsp"); 


} 
public void init(FilterConfig arg0) throws ServletException ( } 


) 


© 首页 动态 菜单 设计 。 当 用 户 登 录 后 ,首先 获取 用 户 的 权限 ,再 传 给 index. jsp, 动 态 
生成 权限 菜单 的 关键 代码 如 下 : 


<ul> 
<1i><a class = "hide" href = "index. jsp"> 首 页 </a> 
<! -- [if lte IE 6]> 
<a href = "index. jsp"> 首 页 </a> 
<table><tr><td> 
<! [endif] -一 > 

«ul» <li><a href = "index. jsp" title = "公共 信息 "> 公共 信息 </a></li> </ul> 
<! -- [if lte IE 6]> 


«/td»«/tr »«/table» 
<! [endif] --» 
</li> 


<li><a class = "hide" href =" 井 "> 教师 相关 </a> 
<! —_ [if lte IE 6]> 
«a href = " # "> 教师 相关 </a> 
«table»«tr»«td» 
<! [endif] -- > 

«ul» 
<%  if(info.contains(2)) {%> 
<li><a href = "Teacher /teacherOpe. do?method = teaInfo" title= "个 人 信息 "> 个 人 信息 </a></1i> 
<% ) if('info.contains(2))( %> 


«li»«ahref-"£&" title- "个 人 信息 ">< font color = "#C2C2C2"> 个 人 信息 </font ></a></1i> 


<%}%> 
<% if(info.contains(3))( %> 


<li><a href = "Teacher /teacherOpe. do?method = newItem" title = "教师 报 题 "> 教师 报 题 </a></1i> 


<% } if(!info.contains(3)){ $> 


<li><a href="#" title= "教师 报 题 ">< font color = "it С2С2С2"> #00138 i</font ></a></1i> 


<% } $> 
<% if(info.contains(4))( %> 


<li><a href = "Teacher /teacherOpe. do? method = itemList" title = "题目 维护 "> 题目 维护 </a> 


</li> 
<% } if(!info.contains(4)){ %> 


<li><a href = " # " title= "题目 维护 ">< font color = " # С2С2С2"> Й Н AE dP«/font > «/a» «/1i» 


<% } $> 


首页 (index. jsp) 动 态 菜单 实际 效果 示意 图 如 图 11-38 所 示 。 


当前 位 置 : 首页 AP: 计算 机 科学 与 技术 学 院 Wke ”教师 


ЕТСЕК 
[sea | eene | 


图 11-38 首页 (index. jsp) 动 态 菜单 实际 效果 示意 图 


О 文档 生成 与 下 载 程序 设计 。FreeMarker 是 一 个 用 Java 编写 的 模板 引擎 ,主要 用 来 
生成 HTML Web 页 面 ,特别 是 基于 МУС 模式 的 应 用 程序 。FreeMarker 通常 由 Java 程序 
准备 要 显示 的 数据 ,由 FreeMarker 模板 生成 页 面 。FreeMarker 可 以 作为 Web 应 用 框架 一 
个 组 件 , 但 它 与 容器 无 关 , 在 非 Web 应 用 程序 环境 也 能 工作 得 很 好 。FreeMarker 适合 作为 


MVC 的 视图 组 件 ,还 能 在 模板 中 使 用 JSP 标记 库 。 


从 Office 2003 开始 ,Word 支持 XML 格式 ,用 XML 处 理 Word 文档 就 简单 了 ,借助 
FreeMarker 模板 引擎 ,可 以 方便 地 使 用 Java 生成 复杂 的 Word 文档 。 本 系统 中 Word 文档 


的 自动 生成 功能 就 是 采用 这 一 方法 实现 的 。 
具体 实现 思路 如 下 : 
(a) 先 用 Office 2003 或 2007 编辑 一 个 标准 Word 格式 的 模板 文件 。 
(b) 对 需要 替换 的 内 容 编辑 为 FreeMarker 标记 ,标记 格式 $ (var}”。 
(c) 将 该 Word 文件 另存 为 XML 格式 的 文件 。 


(d) 用 firstobject 工具 将 XML 文件 标准 化 ,同时 将 编码 改 为 GBK( 和 否则 生成 的 文件 会 


乱码 ,用 Word 打 不 开 ) 。 


(e) 在 MyEclipse 中 打开 该 XML 格式 的 Word 文件 , 直接 另存 为 后 级 名 为 ftl 的 


FreeMarker 模板 文件 (x. Е) 。 


A HX 
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(D 最 后 由 


Java 程序 向 FreeMarker 模板 文件 (* . Р) РЈ $ (var) ”标记 提供 数据 , 输 


出 新 合成 的 Word ЕС +. дос). 

经 测试 这 种 方式 生成 的 Word 文档 完全 符合 Office 标准 ,样式 和 内 容 控制 非常 便利 , 打 
印 也 不 会 变形 ,生成 的 文档 和 Office 中 编辑 文档 完全 一 样 。 

下 载 文档 的 服务 类 文件 DownloadClass. java 代码 如 下 : 


package util; 


import java. 
import java. 
import java. 
import java. 
import java. 
import java. 
import java. 
import java. 


io.BufferedInputStream; 
io.BufferedOutputStream; 
io.File; 
io.FileInputStream; 

іо. InputStream; 

io. OutputStream; 

net. URLDecoder; 

net. URLEncoder; 


import javax. servlet. http. HttpServletResponse; 
public class DownloadClass { 


/xx 下 载 服务 器 Tomcat 上 的 文件 
* @param path (@param response (return 
*/ 
public HttpServletResponse download(String path, HttpServletResponse response) { 
try (File file = пен File(path); //path 是 指 要 下 载 文 件 的 路 径 
String filename = file.getName(); // 取 得 文件 名 
// 取 得 文件 的 后 级 名 


String ext = filename. substring(filename. lastIndexOf(".") + 1).toUpperCase(); 
// 以 流 的 形式 下 载 文件 

InputStream fis = new BufferedInputStream(new FileInputStream(path)); 

byte[ ] buffer = new byte[fis.available()]; 

fis.read(buffer); 

fis.close(); 

response. reset(); // 清 空 response 

// 设 置 response 的 Header 

filename = URLEncoder. encode( filename, "gbk") ; 

filename - URLDecoder.decode(filename, "IS08859 1"); 

response. addHeader( "Content - Disposition", "attachment;filename- " + filename); 
response. addHeader( "Content - Length", "" + file.length()); 

OutputStream toClient - new BufferedOutputStream(response. getOutputStrean()); 
response. setContentType("application/octet – stream"); 

toClient.write(buffer); 

toClient.flush(); 

toClient.close(); 


} catch (Exception ex) ( ex. printStackTrace(); 


)finally( 


) 


File f = new File(path); 
f.delete(); 


return response; 


} 
/xx 


* 下 载 上 传 在 服务 器 本 地 的 文件 


* (@param path (param response (return 


*/ 
public HttpServletResponse Local download(String path, HttpServletResponse response) ( 

try (File file = new File(path); //path 是 指 要 下 载 文件 的 路 径 
String filename = file.getName(); // 取 得 文件 名 
// 取 得 文件 的 后 缀 名 
String ext = filename.substring(filename.lastIndexOf(".") + 1).toUpperCase(); 
// 以 流 的 形式 下 载 文件 
InputStream fis = new BufferedInputStream(new FileInputStream(path)); 
byte[] buffer = new byte[fis.available()]; 
fis.read(buffer); 
fis.close(); 
response. reset(); // 清 空 response 
// 设 置 response 的 Header 
filename = URLEncoder. encode( filename, "gbk" ) ; 
filename = URLDecoder. decode( filename, "IS08859_1"); 
response. addHeader( "Content — Disposition", "attachment;filename = " + filename); 
response. addHeader("Content - Length", "" + file.length()); 
OutputStream toClient = new BufferedOutputStream(response. getOutputStrean()); 
response. setContentType( "application/octet - stream"); 
toClient. write(buffer); 
toClient. flush(); 
toClient.close(); 

) catch (Exception ex) ( ex. printStackTrace(); 

) 

return response; 

) 


) 


本 毕业 设计 (论文 ) 管 理 系统 已 在 综合 性 大 学 全 校 运 行 两 年 ,系统 设计 合理 ,功能 实用 完 
善 。 由 于 本 书 篇 幅 限制 ,系统 详细 代码 不 逐一 列 出 ,项 目 源 代 码 可 从 教材 资源 网 站 获取 。 
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附录 A 《JSP Web 技术 项 目 实 训 》 
计划 书 参 考 样本 


{52а 6] 


通过 开展 综合 项 目的 开发 及 相关 文档 与 工作 日 志 的 撰写 ,达到 以 下 要 求 ， 
CD 提高 学 生 系统 分 析 能 力 和 良好 的 文字 表达 能 力 。 

(2) 熟练 掌握 Java Web 应 用 系统 的 开发 设计 方法 。 

(3) 熟练 掌握 相关 开发 工具 的 使 用 方法 。 

(4) 巩固 和 掌握 JSP 十 JavaBean 十 Servlet 的 编程 模式 。 

(5) 掌握 数据 库 及 表 的 管理 操作 与 维护 技术 。 

(6) 培养 学 生 良 好 的 工作 作风 和 职业 道德 。 


[xi x 


在 实 训 中 ,采用 按 模块 分 解 的 方法 ,遵循 Web 项 目 开 发 运作 模式 ,对 Web 项 目的 需求 
分 析 、` 详 细 设计 、 数 据 库 设 计 、 程 序 设计 与 开发 ,测试 等 流程 进行 全 方位 的 实 训 。 


【 实 训 的 组 织 】 


实 训 中 ,采用 个 人 和 小 组 结合 的 方式 。 每 4 一 5 名 学 生 组 成 一 个 项 目 组 ,以 小 组 方式 进 
行 项 目 开发 .技术 讨论 和 管理 。 经 常 以 小 组 方式 召开 技术 讨论 会 ,交流 开发 进展 情况 以 及 工 
作 中 过 到 的 技术 问题 。 小 组 成 员 分 工 合 作 , 每 个 同学 独立 完成 各 自 的 实 训 任 务 ,撰写 各 自 的 
开发 文档 和 项 目 开发 日 志 以 及 实 训 技术 总 结 报告 。 


【 实 训 内 容 及 安排 】 


实 训 题目 由 指导 老师 提供 题目 或 小 组 自 拟 题目 ( 自 拟 题目 需 经 指导 老师 审核 通过 )。 
实 训 内 容 如 下 : 

(1) 需要 分 析 。 

掌握 如 何 分 析 用 户 对 项 目的 需求 。 

(2) 项 目的 系统 分 析 。 

掌握 系统 分 析 的 方法 。 

掌握 用 例 图 。 

掌握 UML 图 。 

(3) 数据 库 设计 。 


掌握 设计 数据 库 的 概念 模型 。 

掌握 设计 数据 库 的 物理 模型 。 

掌握 SQL 语句 。 

(4) 项 目的 详细 设计 。 

掌握 MySQL 数据 库 和 Tomcat 服务 器 的 配置 。 

掌握 JSP ЈауаВеап 和 Servlet 技术 实现 的 МУС 开发 模式 。 
掌握 使 用 DisplayTag 组 件 实现 分 页 。 

掌握 使 用 FCKeditor 组 件 实现 文字 编辑 。 

掌握 使 用 DbUtils 组 件 实现 数据 库 连 接 池 的 封装 。 

掌握 合理 综合 使 用 各 种 辅助 开发 工具 。 

掌握 在 项 目 过 程 中 程序 问题 出 现 后 如 何 使 用 各 种 调试 方法 。 
掌握 利用 网 络 技术 开发 项 目 。 

(5) 项 目测 试 。 

掌握 单元 测试 方法 。 

掌握 系统 测试 方法 。 

实 训 安排 如 表 А-1 所 示 。 


表 A-1 实 训 安 排 


项 目 /单元 主要 内 容 计划 学 时 ж È 
1 


e| elo 


【考核 方法 】 

考核 包括 平时 考核 和 实 训 项 目 完成 考核 ,平时 成 绩 占 总 成 绩 的 30%, 实 训 项 目 完成 考 
核 占 总 成 绩 的 70%。 重 点 考核 学 生 对 Java Web 项 目 程序 设计 开发 的 能 力 。 
【 实 训 环 境 】 


为 保证 实 训 的 顺利 开展 ,需要 有 配备 计算 机 的 专门 实 训 教 室 和 安装 用 于 进行 Java Web 
软件 的 实 训 室 。 在 时 间 安 排 上 ,根据 学 院 的 统一 教学 安排 ,在 实 训 周 教学 时 段 进行 集中 综合 
训练 。 


【软件 及 硬件 要 求 】 


(1) 计算 机 局 域 网 教室 ,能 够 接 入 Internet。 
(2) 安装 有 专用 的 专业 应 用 软件 系统 ,如 MyEclipse, Tomcat, JDK, Dreamweaver, 
MySQL. 


>й 
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【师资 要 求 】 
实 训 指导 教师 由 本 专业 承担 Web 相关 课程 教学 的 教师 担任 。 
[ # ж £ £] 


(1) 学 生 在 实 训 前 ,需要 复习 所 学 的 相关 专业 课程 知识 ,认真 阅读 实 训 指引 书 等 。 

(2) 实 训 教学 强调 的 是 以 “做 、 学 ”为 中 心 ,学 生 是 实 训 活动 的 主人 。 每 项 活动 都 需要 学 
生 自 主 地 组 织 实施 ,充分 发 挥 自己 的 聪明 才智 和 创造 性 。 教 师 的 作用 是 帮助 指导、 引导 学 
生 的 开展 项 目 实 训 活动 。 因 此 ,要 求学 生 明 确 任 务 , 积 极 参与 ,相互 讨论 ,主动 提出 问题 , 提 
出 建设 性 的 建议 ; 同学 间 相 互 影 响 、 互 相 启发 ,共同 提高 专业 知识 和 能 力 。 

(3) 学 生 必须 严格 遵守 实 训 安排 ,按时 出 勤 ,按时 完成 每 个 阶段 的 实 训 任务 。 

Са) 学 生 在 实 训 活动 中 不 得 有 造假 .抄袭 等 无 诚信 的 行为 。 


附录 В 常见 HTTP MIME 类 型 


最 早 的 HTTP 协议 中 ,并 没有 附加 的 数据 类 型 信息 ,所 有 传送 的 数据 都 被 客户 程序 解 
释 为 超 文本 标记 语言 HTML 文档 ,而 为 了 支持 多 媒体 数据 类 型 ,HTTP 协议 中 就 使 用 了 附 
加 在 文档 之 前 的 MIME 数据 类 型 信息 来 标识 数据 类 型 。 

MIME 意 为 多 目 Internet 邮件 扩展 , 它 设 计 的 最 初 目 的 是 为 了 在 发 送 电子 邮件 时 附加 
多 媒体 数据 ,让 邮件 客户 程序 能 根据 其 类 型 进行 处 理 。 当 它 被 HTTP 协议 支持 之 后 , 它 的 
意义 就 更 为 显著 了 。 它 使 得 HTTP 传输 的 不 仅 是 普通 的 文本 ,而 是 各 种 文件 格式 。 

每 个 MIME 类 型 由 两 部 分 组 成 ,前 面 是 数据 的 大 类 别 , 如 声音 .图 像 等 ,后 面 定 义 具体 
的 种 类 。 

Web 服务 器 和 浏览 器 中 ,默认 设置 了 标准 和 常见 的 MIME 类 型 ,只 有 对 于 不 常见 的 
MIME 类 型 , 才 需 要 同时 设置 服务 器 和 客户 浏览 器 ,以 进行 识别 。 

由 于 MIME 类 型 与 文档 的 后 缀 相关 ,因此 服务 器 使 用 文档 的 后 绥 来 区 分 不 同文 件 的 
MIME 类 型 ,服务 器 中 必须 定义 文档 后 级 和 MIME 类 型 之 间 的 对 应 关系 。 客 户 程序 从 服务 
器 上 接收 数据 时 , 它 只 是 从 服务 器 接收 数据 流 , 并 不 了 解 文档 的 名 字 , 因 此 服务 器 必须 使 用 
附加 信息 来 告诉 客户 程序 数据 的 MIME 类 型 。 服 务 器 在 发 送 真 正 的 数据 之 前 ,就 要 先 发 送 
标志 数据 的 MIME 类 型 的 信息 ,这 个 信息 使 用 Content-type 关键 字 进 行 定义 ,如 表 B-1 
所 示 。 


表 B-1 HTTP MIME 类 型 (ContentType 属性 值 ) 列 表 


MIME-Type x 件 名 
application/acad *.dwg 
application/astound *.asd *.asn 
application/dsptype *.tsp 
application/dxf * . dxf 
application/futuresplash *.spl 
application/gzip *.gz 
application/listenup *. ptlk 
application/mac-binhex40 ж. Һах 
application/mbedlet *.mbd 
application/mif *.mif 
application/msexcel *.xls *.xla 
application/ mshelp *.hlp *.chm 
application/mspowerpoint * 


-ppt *.ppz *.pps *. pot 


JSP Web # K X Am B 3: viste 


MIME-Type 


x # 多 


续 表 


application/msword 
application/octet-stream 
application/oda 
application/ pdf 
application/ postscript 
application/rtc 
application/rtf 
application/ studiom 
application/toolbook 
application/ vocaltec-media-desc 
application/vocaltec-media-file 
application/ xhtml -- xml 
application/xml 
application/x-bcpio 
application/x-compress 
application/x-cpio 
application/x-csh 
application/x-director 
application/x-dvi 
application/x-envoy 
application/x-gtar 
application/ x-hdf 
application/ x-httpd-php 
application/ x-javascript 
application/ x-latex 
application/x-macbinary 
application/ x-mif 
application/ x-netcdf 
application/ x-nschat 
application/ x-sh 
application/ x-shar 
application/ x-shockwave-flash 
application/x-sprite 
application/x-stuffit 
application/ x-supercard 
application/ x-sv4cpio 


application/x-sv4crc 


application/x-tar 
application/ x-tcl 
application/x-tex 
application/ x-texinfo 


application/x-troff 


.doc *.dot 


. oda 
. pdf 
.ai *.eps *.ps 
» Tte 


.rtf 


. vmf 

.htm *,html *.shtml * . xhtml 
. xml 

. bcpio 

.. 

. cpio 

.csh 

.der *.dir *.dxr 
. dvi 

.evy 

.gtar 

. hdf 

.php *.phtml 
.js 

. latex 

. bin 

. mif 

-nc *.cdf 
.nsc 

.sh 

. shar 

.swf *.cab 
«spr *.sprite 
. Sit 

. sca 

. sv4cpio 

. sv4crc 

.tar 

. tcl 

.tex 

.texinfo * . texi 


.t *.tr *.roff 


.bin *.exe *.com *.dll *.class 


MIME-Type 


续 表 
x 件 名 


application/x-troff-man 
application/x-troff-me 
application/x-troff-ms 
application/x-ustar 
application/x-wais-source 
application/x-www-form-urlencoded 
application/zip 
audio/basic 
audio/echospeech 
audio/tsplayer 
audio/voxware 

audio/ x-aiff 

audio/ x-dspeeh 

audio/ x-midi 

audio/ x-mpeg 

audio/ x-pn-realaudio 
audio/ x-pn-realaudio-plugin 
audio/ x-qt-stream 

audio/ x-wav 
drawing/x-dwf 
image/cis-cod 
image/cmu-raster 
image/fif 

image/gif 

image/ief 

image/jpeg 

image/png 

image/tiff 

image/vasa 

image/vnd. wap. wbmp 
image/x-freehand 
image/x-portable-anymap 
image/x-portable-bitmap 
image/x-portable-graymap 
image/x-portable-pixmap 
image/x-rgb 
image/x-windowdump 
image/x-xbitmap 
image/x-xpixmap 
model/vrml 
text/comma-separated-values 


text/css 


.man * . troff 
.me * , troff 
.me * , тов 
.Uustar 


.Src 


.zip 

-au *.snd 

.es 

.tsi 

. VOX 

.aif * „aiff * . айс 
.dus *.cht 

.mid *.midi 
.mp2 

.ram *.ra 

.rpm 

. stream 

. wav 

. dwf 

. cod 

.ras 

.fif 

. gif 

„ief 

„jpeg *.jpg *.jpe 
. png 

„tiff *. tif 

. mef 

. wbmp 

.fh4 *.fh5 *.fhc 
.pnm 

. pbm 

.pgm 

. ppm 

.rgb 

. xwd 

‚хып 

.xpm 

. wrl 

.esv 附 
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MIME-Type x 件 名 
text/html .htm *.html *.shtml 
text/javascript .js 
text/ plain txt 
text/richtext rtx 
text/rtf rtf 
text/tab-separated-values tsv 
text/vnd. wap. wml wml 
application/vnd. wap. wmlc wmlc 
text/ vnd. wap. wmlscript wmls 
application/vnd. wap. wmlscriptc wmlsc 
text/xml . xml 
text/x-setext .etx 


text/ x-sgml 

text/ x-speech 
video/mpeg 
video/quicktime 
video/ vnd. vivo 

video/ x-msvideo 
video/ x-sgi-movie 
workbook/formulaone 
x-world/ x-3dmf 


x-world/ x-vrml 


.sgm *.sgml 

.talk *.spc 

.mpeg *.mpg *.mpe 

.qt *.mov 

.viv *. vivo 

. avi 

. movie 

.vts *.vtts 

.3dmf *.3dm *.qd3d * .qd3 


. wrl 


